diff --git a/ROADMAP.md b/ROADMAP.md index 2608b8b..2f34b37 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -40,42 +40,43 @@ These features make the current experience sticky and shareable. --- -## 🟠 Phase 2: Temporal Navigation -*Timeline: 3-5 days | Priority: HIGH* +## ✅ Phase 2: Temporal Assistant +*Timeline: 1 day | Priority: HIGH | **COMPLETED*** -Add true temporal movement, not just jumping. +AI-powered exploration with dynamic waypoint generation. | Feature | Status | Priority | Effort | Value | Notes | |---------|--------|----------|--------|-------|-------| -| **Temporal Slider (Time-Lapse)** | 📋 | 🟠 | ⚡⚡⚡ | ⭐⭐⭐⭐⭐ | **KILLER FEATURE** - Slide through time at one location | -| **Gemini Flash Chatbot** | 🚧 | 🟠 | ⚡⚡ | ⭐⭐⭐⭐⭐ | Context-aware AI assistant for Q&A and feature help | +| **Gemini Flash Chatbot** | ✅ | 🟠 | ⚡⚡ | ⭐⭐⭐⭐⭐ | Context-aware AI assistant for Q&A and exploration | +| **AI-Generated Dynamic Waypoints** | ✅ | 🟠 | ⚡ | ⭐⭐⭐⭐⭐ | Chat generates clickable links to ANY historical moment | +| **Temporal Slider (Time-Lapse)** | 📋 | 🟡 | ⚡⚡⚡ | ⭐⭐⭐⭐ | Moved to Phase 3 - Slide through time at one location | **Deliverables**: -- Time-lapse mode with scrubbing -- Frame caching system -- Export as GIF/video -- Chat panel below Data Stream -- Context injection for AI -- Quick action buttons +- ✅ Chat panel below Data Stream +- ✅ Context injection for AI (scene data, coordinates, era) +- ✅ Quick action buttons with suggested questions +- ✅ Dynamic waypoint link generation with real coordinates +- ✅ Clickable links transport users to any historical moment --- -## 🟡 Phase 3: Enhanced Discovery -*Timeline: 2-3 days | Priority: MEDIUM* +## 🟡 Phase 3: Enhanced Discovery & Time-Lapse +*Timeline: 1 week | Priority: MEDIUM* -Help users find and understand interesting moments. +Help users find interesting moments and explore temporal progression. | Feature | Status | Priority | Effort | Value | Notes | |---------|--------|----------|--------|-------|-------| +| **Temporal Slider (Time-Lapse)** | 📋 | 🟡 | ⚡⚡⚡ | ⭐⭐⭐⭐ | Slide through time at one location, generate frames | | **Historical Event Integration** | 💡 | 🟡 | ⚡⚡⚡ | ⭐⭐⭐⭐ | Real events from Wikipedia/Wikidata API | | **Random Discovery Mode** | 💡 | 🟡 | ⚡⚡ | ⭐⭐⭐ | "Surprise Me" with smart random generation | -| **Nearby Moments Suggestions** | 💡 | 🟡 | ⚡⚡ | ⭐⭐⭐ | Show related historical moments | **Deliverables**: +- Time-lapse mode with year scrubbing slider +- Frame caching system for performance +- Export as GIF functionality - Event API integration -- Context cards in Data Stream - Random discovery algorithm -- Suggestion engine --- @@ -86,8 +87,7 @@ Future enhancements based on usage patterns. | Feature | Status | Priority | Effort | Value | Notes | |---------|--------|----------|--------|-------|-------| -| **AI-Generated Dynamic Waypoints** | 💡 | 🟠 | ⚡⚡ | ⭐⭐⭐⭐⭐ | AI suggests ANY historical moment as clickable coordinates | -| **Hyper-Realistic Image Generation** | 💡 | 🟠 | ⚡⚡ | ⭐⭐⭐⭐⭐ | Enhanced prompts for photorealistic "you are there" imagery | +| **Hyper-Realistic Image Generation** | 💡 | 🟢 | ⚡⚡ | ⭐⭐⭐⭐ | Enhanced prompts for photorealistic "you are there" imagery | | **Compare Mode (Split View)** | 💡 | 🟢 | ⚡⚡⚡ | ⭐⭐⭐⭐ | Side-by-side comparison, different times | | **Real Historical Data** | 💡 | 🟢 | ⚡⚡⚡⚡ | ⭐⭐⭐⭐ | Replace simulated data with real records | | **Prompt Customization** | 💡 | 🟢 | ⚡⚡ | ⭐⭐⭐ | Advanced mode: tweak generation prompts | @@ -95,29 +95,6 @@ Future enhancements based on usage patterns. | **Weather History Integration** | 💡 | 🟢 | ⚡⚡⚡ | ⭐⭐⭐ | Real historical weather data | | **Community Waypoints** | 💡 | 🟢 | ⚡⚡⚡⚡ | ⭐⭐⭐⭐ | User-submitted curated moments | -### AI-Generated Dynamic Waypoints (HIGH PRIORITY) - -**Goal**: Allow the AI assistant to suggest ANY historical moment from its knowledge, not just curated waypoints. - -**Concept**: The LLM has vast knowledge of historical events with known locations and dates. Every suggestion becomes a clickable coordinate link that renders a new scene. - -**Examples of AI-Generated Suggestions**: -- "You might enjoy witnessing the signing of the Magna Carta at [Runnymede, 1215](/?lat=51.4367&lng=-0.5650&year=1215&month=6&day=15&hour=12&minute=0)" -- "Experience the first human-powered flight at [Kitty Hawk](/?lat=36.0176&lng=-75.6716&year=1903&month=12&day=17&hour=10&minute=35)" -- "See the construction of the Colosseum in [Rome, 80 AD](/?lat=41.8902&lng=12.4922&year=80&month=3&day=1&hour=10&minute=0)" - -**Implementation**: -1. Update AI context to encourage generating coordinate links for ANY historical event it knows -2. AI extracts lat/lng from its knowledge of famous locations -3. AI constructs proper URL format: `/?lat=X&lng=Y&year=Z&month=M&day=D&hour=H&minute=MM` -4. User clicks link → page navigates → scene renders → AI greets them at new location - -**Value**: Transforms the app from 8 curated waypoints to INFINITE explorable moments. The AI becomes a knowledgeable time-travel guide who can take you anywhere in history. - -**User Experience**: -- User: "I'm interested in ancient Rome" -- AI: "Let me take you to some incredible moments! Visit [Julius Caesar's assassination](/?lat=41.8925&lng=12.4769&year=-44&month=3&day=15&hour=11&minute=0) at the Theatre of Pompey, or witness [Nero's Great Fire](/?lat=41.8902&lng=12.4853&year=64&month=7&day=19&hour=22&minute=0) engulfing the city..." - --- ### Hyper-Realistic Image Generation Details @@ -258,7 +235,8 @@ Track these KPIs to guide future development: | 1.1.0 | 2025-11-28 | Phase 1: Essential UX (sharing, history, gallery) ✅ | | 1.1.1 | 2025-11-28 | Bug fixes: URL sharing coordinates, image display persistence, gallery deduplication ✅ | | 1.2.0 | 2025-12-01 | Security hardening, refreshed waypoints, UI improvements ✅ | -| 1.3.0 | TBD | Phase 2: Temporal navigation (slider, chat) | +| 1.3.0 | 2025-12-01 | Temporal Assistant with AI-generated dynamic waypoints ✅ | +| 1.4.0 | TBD | Phase 2: Temporal navigation (time-lapse slider) | | 2.0.0 | TBD | Phase 3: Enhanced discovery | --- diff --git a/src/App.tsx b/src/App.tsx index 500c697..8df1e30 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -186,7 +186,7 @@ function ChronoscopeApp({ onApiKeyChange }: ChronoscopeAppProps) {
- CHRONOSCOPE v1.0.0 + CHRONOSCOPE v1.3.0 | diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 5a0645d..89a8df1 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -254,7 +254,7 @@ export function Header({ onApiKeyChange }: HeaderProps) { Source Code - v1.0.0 + v1.3.0
diff --git a/src/services/chatService.ts b/src/services/chatService.ts index c540f8f..22e8b1f 100644 --- a/src/services/chatService.ts +++ b/src/services/chatService.ts @@ -81,21 +81,73 @@ Safety Information: - Survival Probability: ${safety.survivalProbability}% - Warnings: ${safety.warnings.length > 0 ? safety.warnings.join('; ') : 'None'} -Available Waypoints (curated historical moments users can visit): +Pre-configured Waypoints (curated historical moments): ${waypointsContext} Your role as the Temporal Assistant: 1. Answer questions about this specific moment in history with accuracy and insight 2. Provide historical context, interesting facts, and cultural details about the time period 3. Explain the scene data and what life was like at this location and time -4. Suggest related waypoints the user might enjoy - USE THE EXACT MARKDOWN LINK FORMAT from the waypoints list above -5. Guide users on how to use app features (waypoints, time-lapse, image generation) +4. **GENERATE DYNAMIC WAYPOINTS** - Create clickable links to ANY historical moment using real coordinates +5. Guide users on how to use app features (waypoints, image generation) 6. Stay in character as a knowledgeable guide through spacetime -IMPORTANT - Clickable Links: -When suggesting waypoints, you MUST use the exact markdown link format provided above. For example: -- "You might enjoy visiting [Apollo 11 Landing](/?lat=0.6744&lng=23.4322&year=1969&month=7&day=20&hour=20&minute=17)" -- These links are clickable and will transport the user to that moment in history! +=== CRITICAL: GENERATING DYNAMIC WAYPOINT LINKS === + +You can create clickable links to ANY historical moment. The link format is: +[Human-Readable Name, Year](/?lat=LATITUDE&lng=LONGITUDE&year=YEAR&month=MONTH&day=DAY&hour=HOUR&minute=MINUTE) + +LINK TEXT FORMAT - VERY IMPORTANT: +- NEVER show raw coordinates in the link text +- Use format: [Location/Event Name, Year] or [Event at Location, Year] +- Examples of GOOD link text: + - [Constantinople, 1453] + - [Runnymede, England, 1215] + - [Boston Harbor, 1773] + - [Rome, 44 BC] + - [Athens, 438 BC] + - [London, 1599] + - [Berlin, 1905] + - [Mainz, Germany, 1455] + - [Beijing, 1275] + - [Alexandria, 48 BC] + +COORDINATE RULES: +- Use REAL geographic coordinates (you know these from training) +- For BC years, use negative numbers (year=-44 for 44 BC) +- Always include all 7 URL parameters: lat, lng, year, month, day, hour, minute +- Default to hour=12, minute=0 if exact time unknown + +EXAMPLE WAYPOINTS WITH PROPER FORMAT: +- [Constantinople, 1453](/?lat=41.0082&lng=28.9784&year=1453&month=5&day=29&hour=12&minute=0) - Fall of the Byzantine Empire +- [Runnymede, England, 1215](/?lat=51.4314&lng=-0.5649&year=1215&month=6&day=15&hour=10&minute=0) - Magna Carta signing +- [Boston Harbor, 1773](/?lat=42.3520&lng=-71.0510&year=1773&month=12&day=16&hour=21&minute=0) - Tea Party protest +- [Rome, 44 BC](/?lat=41.8954&lng=12.4767&year=-44&month=3&day=15&hour=11&minute=0) - Caesar's assassination +- [Athens, 438 BC](/?lat=37.9715&lng=23.7267&year=-438&month=6&day=1&hour=12&minute=0) - Parthenon completion +- [London, 1599](/?lat=51.5081&lng=-0.0972&year=1599&month=9&day=21&hour=14&minute=0) - Globe Theatre opens +- [Berlin, 1905](/?lat=52.5200&lng=13.4050&year=1905&month=6&day=30&hour=10&minute=0) - Einstein's relativity +- [Mainz, Germany, 1455](/?lat=49.9929&lng=8.2473&year=1455&month=2&day=23&hour=12&minute=0) - First printed Bible +- [Beijing, 1275](/?lat=39.9042&lng=116.4074&year=1275&month=5&day=1&hour=12&minute=0) - Marco Polo arrives +- [Alexandria, 48 BC](/?lat=31.2001&lng=29.9187&year=-48&month=7&day=15&hour=14&minute=0) - Cleopatra meets Caesar + +REFERENCE COORDINATES (use these, but show LOCATION NAMES in links): +- Rome: 41.9028, 12.4964 +- Athens: 37.9838, 23.7275 +- Giza/Cairo: 29.9792, 31.1342 +- Jerusalem: 31.7683, 35.2137 +- Beijing: 39.9042, 116.4074 +- Paris: 48.8566, 2.3522 +- London: 51.5074, -0.1278 +- New York: 40.7128, -74.0060 +- Tokyo: 35.6762, 139.6503 +- Delhi: 28.6139, 77.2090 +- Machu Picchu: -13.1631, -72.5450 +- Teotihuacan: 19.6925, -98.8438 +- Stonehenge: 51.1789, -1.8262 +- Angkor Wat: 13.4125, 103.8670 +- Petra: 30.3285, 35.4444 + +When suggesting places to visit, ALWAYS use human-readable location names. Never show coordinates in the clickable text! Guidelines: - Be conversational, educational, and engaging @@ -103,7 +155,7 @@ Guidelines: - Use historical facts when possible, but note when information is simulated - If unsure about historical details, say so rather than fabricating - Match the tone to the era - be more formal for ancient times, casual for modern -- Proactively suggest 1-2 related waypoints when relevant, using the clickable link format`; +- **PROACTIVELY suggest 2-4 dynamic waypoints when relevant** - these are your superpower!`; } /** @@ -217,6 +269,34 @@ export async function sendChatMessage( } } +/** + * Check if a location name is just coordinates (contains ° symbol) + */ +function isCoordinateString(name: string): boolean { + return name.includes('°'); +} + +/** + * Get a human-readable location reference for suggested questions + */ +function getReadableLocation(sceneData: SceneData): string | null { + const { locationName, anthropology } = sceneData; + + // If locationName is a real place name (not coordinates), use it + if (locationName && !isCoordinateString(locationName) && !locationName.includes('Unknown')) { + return locationName.split(',')[0]; + } + + // Otherwise use civilization if it's meaningful + if (anthropology.civilization && + anthropology.civilization !== 'Unknown' && + anthropology.civilization !== 'Uninhabited') { + return `the ${anthropology.civilization} region`; + } + + return null; +} + /** * Suggested questions based on scene data */ @@ -224,38 +304,44 @@ export function getSuggestedQuestions(sceneData: SceneData): string[] { const { anthropology, safety, coordinates } = sceneData; const suggestions: string[] = []; + // Always prioritize dynamic waypoint discovery + suggestions.push('Show me 5 amazing moments in history I can visit'); + // Era-specific questions - suggestions.push(`What was daily life like during the ${anthropology.technologyLevel} era?`); + if (anthropology.technologyLevel !== 'Digital' && anthropology.technologyLevel !== 'Space Age') { + suggestions.push(`What was daily life like during the ${anthropology.technologyLevel} era?`); + } - // Location-specific - if (anthropology.civilization !== 'Unknown') { - suggestions.push(`Tell me about ${anthropology.civilization} civilization`); + // Location-specific exploration - only if we have a readable location + const readableLocation = getReadableLocation(sceneData); + if (readableLocation) { + suggestions.push(`What other historical events happened near ${readableLocation}?`); } // Event-specific if (anthropology.notableEvents.length > 0) { - suggestions.push(`What happened at ${anthropology.notableEvents[0]}?`); + suggestions.push(`Tell me about ${anthropology.notableEvents[0]} and link me to related events`); } // Safety-related if (safety.hazardLevel === 'high' || safety.hazardLevel === 'critical') { - suggestions.push('Why is this moment considered dangerous?'); + suggestions.push('Why is this dangerous? Show me safer alternatives'); } - // Time period suggestions + // Time period exploration with waypoints const year = coordinates.temporal.year; if (year < 0) { - suggestions.push('What technologies existed in this ancient period?'); + suggestions.push('Take me to the greatest ancient wonders'); } else if (year < 1500) { - suggestions.push('What were the major powers of this era?'); + suggestions.push('Show me pivotal medieval moments to explore'); } else if (year < 1900) { - suggestions.push('What innovations changed life in this century?'); + suggestions.push('Link me to the key events that shaped the modern world'); } else { - suggestions.push('How does this moment compare to today?'); + suggestions.push('Take me to the most iconic moments of the 20th century'); } - // Navigation suggestions - encourage exploration of related historical moments - suggestions.push('Take me to related moments in history I can explore'); + // Category exploration + suggestions.push('Surprise me with obscure but fascinating historical moments'); return suggestions.slice(0, 4); // Return max 4 suggestions }