Upload 11 files

.gitignore

@@ -0,0 +1,13 @@
+.vercel
+*.log
+*.pyc
+__pycache__
+
+# Environments 
+.env 
+.venv 
+env/ 
+venv/ 
+ENV/ 
+env.bak/ 
+venv.bak/ 

api/app.py

@@ -0,0 +1,94 @@
+import os
+from flask import Flask, jsonify, render_template, request
+import google.generativeai as genai
+
+app = Flask(__name__, static_folder='static')
+
+genai.configure(api_key=os.getenv("GOOGLE_API_KEY"))
+
+# Enhanced generation config
+generation_config = {
+    "temperature": 0.9,
+    "top_p": 0.95,
+    "top_k": 40,
+    "max_output_tokens": 1024,
+}
+
+model = genai.GenerativeModel(
+    model_name="gemini-1.5-flash-002",
+    generation_config=generation_config,
+    system_instruction="You are a master storyteller who creates engaging, creative stories in any genre."
+)
+
+# Store active chat sessions
+sessions = {}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/start-story', methods=['POST'])
+def start_story():
+    try:
+        data = request.json
+        genre = data.get('genre', 'fantasy')
+        theme = data.get('theme', 'adventure')
+        session_id = os.urandom(16).hex()
+        
+        prompt = f"Create the beginning of a {genre} story with a {theme} theme. Make it engaging, easy to read, with a good flow and approximately 300 words. also make sure you use easy level of english and simple words."
+        
+        chat_session = model.start_chat(history=[])
+        response = chat_session.send_message(prompt)
+        
+        sessions[session_id] = {
+            'chat_session': chat_session,
+            'genre': genre,
+            'theme': theme,
+            'branch_point': 1
+        }
+        return jsonify({
+            'story': response.text,
+            'session_id': session_id
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/continue-story', methods=['POST'])
+def continue_story():
+    try:
+        data = request.json
+        session_id = data.get('session_id')
+        branch_choice = data.get('branch_choice', 'main')
+        
+        if session_id not in sessions:
+            return jsonify({'error': 'Invalid session'}), 400
+            
+        session = sessions[session_id]
+        chat_session = session['chat_session']
+        
+        if branch_choice == 'branch':
+            prompt = "Continue the story but introduce an unexpected twist that creates a new story branch."
+        else:
+            prompt = "Continue the story naturally from where it left off."
+            
+        response = chat_session.send_message(f"{prompt} Add approximately 300 more words.")
+        
+        # Generate branch options every 3 chunks
+        branch_options = None
+        if session['branch_point'] % 3 == 0:
+            branch_options = [
+                "Continue the main story",
+                "Explore an alternative path"
+            ]
+            
+        session['branch_point'] += 1
+        
+        return jsonify({
+            'continuation': response.text,
+            'branch_options': branch_options
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+# if __name__ == '__main__':
+app.run(host='0.0.0.0', port=9200)

api/static/css/style.css

@@ -0,0 +1,470 @@
+:root[data-theme="light"] {
+    --bg-primary: #f8f9fa;
+    --bg-secondary: #ffffff;
+    --text-primary: #2c3e50;
+    --text-secondary: #6c757d;
+    --accent: #3498db;
+    --border: #e9ecef;
+    --shadow: rgba(0,0,0,0.1);
+    --menu-bg: rgba(255, 255, 255, 0.95);
+}
+
+:root[data-theme="dark"] {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #121212;
+    --text-primary: #e9ecef;
+    --text-secondary: #adb5bd;
+    --accent: #61dafb;
+    --border: #404040;
+    --shadow: rgba(0, 0, 0, 0.3);
+    --menu-bg: rgba(18, 18, 18, 0.95);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body {
+    font-family: 'Crimson Text', Georgia, serif;
+    line-height: 1.8;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+}
+
+.menu-toggle {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1001;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: 1.5rem;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: var(--bg-secondary);
+    box-shadow: 0 2px 10px var(--shadow);
+}
+
+.settings-panel {
+    position: fixed;
+    top: 0;
+    right: -300px;
+    width: 300px;
+    height: 100vh;
+    background-color: var(--menu-bg);
+    padding: 2rem;
+    box-shadow: -5px 0 15px var(--shadow);
+    transition: right 0.3s ease;
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+}
+
+.settings-panel.active {
+    right: 0;
+}
+
+.settings-header {
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.settings-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
+}
+
+select {
+    width: 100%;
+    padding: 0.8rem;
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 1rem;
+    cursor: pointer;
+    outline: none;
+}
+
+.theme-toggle {
+    background: none;
+    border: 2px solid var(--border);
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 0.8rem;
+    border-radius: 8px;
+    width: 100%;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.story-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    padding-top: 4rem;
+}
+
+.story-paragraph {
+    font-size: 1.2rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.8;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeIn 0.8s ease-out forwards;
+    letter-spacing: 0.3px;
+    white-space: pre-wrap;  /* Preserve whitespace and wrap text */
+    font-family: inherit;   /* Use the same font as body */
+    background: none;       /* Remove pre element's default background */
+    border: none;          /* Remove pre element's default border */
+    overflow-x: hidden;    /* Prevent horizontal scrolling */
+    width: 100%;          /* Take full width of container */
+}
+
+.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    color: var(--text-secondary);
+}
+
+.loading-dots {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.loading-dots span {
+    width: 8px;
+    height: 8px;
+    background-color: var(--accent);
+    border-radius: 50%;
+    animation: bounce 0.5s infinite alternate;
+}
+
+.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes bounce {
+    to {
+        transform: translateY(-8px);
+    }
+}
+
+@media (max-width: 768px) {
+    .story-container {
+        padding: 1rem;
+        padding-top: 4rem;
+    }
+
+    .story-paragraph {
+        font-size: 1.1rem;
+        line-height: 1.7;
+    }
+
+    .settings-panel {
+        width: 100%;
+        right: -100%;
+    }
+}
+
+/* Reading Progress Bar */
+.progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background-color: var(--border);
+    z-index: 1002;
+}
+
+.progress {
+    height: 100%;
+    background-color: var(--accent);
+    width: 0%;
+    transition: width 0.1s;
+}
+
+/* Font size controls */
+.font-size-controls {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.font-size-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    border-radius: 4px;
+    cursor: pointer;
+}
+/* Reading Time Indicator */
+.reading-info {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    background-color: var(--bg-secondary);
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    box-shadow: 0 2px 10px var(--shadow);
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    opacity: 0.8;
+    transition: opacity 0.3s;
+}
+
+.reading-info:hover {
+    opacity: 1;
+}
+
+/* Text-to-Speech Controls */
+.tts-controls {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    display: flex;
+    gap: 0.5rem;
+    z-index: 1000;
+}
+
+.tts-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 10px var(--shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+}
+
+.tts-btn:hover {
+    transform: scale(1.1);
+}
+
+.tts-btn.active {
+    color: var(--accent);
+}
+
+/* Genre-specific themes */
+.theme-group {
+    display: none;
+}
+
+.theme-group.active {
+    display: block;
+}
+
+/* Enhanced Settings Panel */
+.settings-section {
+    margin-top: 1rem;
+    padding: 0.7rem;
+    background-color: var(--bg-secondary);
+    border-radius: 8px;
+    box-shadow: 0 2px 5px var(--shadow);
+}
+
+.appearance-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.font-family-select {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.font-size-controls {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+}
+
+.font-size-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.font-size-btn:hover {
+    background: var(--accent);
+    color: var(--bg-secondary);
+}
+
+.theme-toggle {
+    width: 100%;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.theme-toggle:hover {
+    background: var(--accent);
+    color: var(--bg-secondary);
+}
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+    .settings-panel {
+        width: 100%;
+        right: -100%;
+    }
+
+    .reading-info {
+        bottom: 4rem;
+        right: 1rem;
+        font-size: 0.8rem;
+    }
+
+    .appearance-controls {
+        gap: 0.8rem;
+    }
+
+    .font-size-controls {
+        justify-content: space-between;
+    }
+
+    .font-size-btn {
+        flex: 1;
+    }
+}
+
+/* Swipe Indicator */
+.swipe-indicator {
+    position: fixed;
+    bottom: 50%;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    background-color: var(--bg-secondary);
+    padding: 1rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px var(--shadow);
+    display: none;
+    animation: fadeInOut 2s ease-in-out;
+    z-index: 1000;
+}
+
+@keyframes fadeInOut {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 1; }
+}
+/* Add new styles for initial loading animation */
+.initial-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+.initial-loading h3 {
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+}
+
+.quill-loading {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 1rem;
+    background: var(--accent);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.78 15.84S18.64 13 19.61 12c3.07-3.07 4.24-6.29 2.83-7.7s-4.63-.24-7.7 2.83l-3.84 3.84M9.63 8.88S6.77 11.74 5.8 12.73c-3.07 3.07-4.24 6.29-2.83 7.7s4.63.24 7.7-2.83l3.84-3.84'/%3E%3C/svg%3E") center/contain no-repeat;
+    animation: write 1s infinite;
+}
+
+@keyframes write {
+    0% { transform: translateX(-15px) rotate(-45deg); }
+    50% { transform: translateX(15px) rotate(-45deg); }
+    100% { transform: translateX(-15px) rotate(-45deg); }
+}
+.app-logo {
+    width: 4px;  /* Adjust size as needed */
+    height: 4px;
+    object-fit: contain;
+    margin-right: 8px;
+}
+
+.app-name {
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: var(--text-primary);
+    font-size: 1rem;
+    font-weight: 600;
+    z-index: 1001;
+    padding: 0.5rem 1rem;
+    background: var(--bg-secondary);
+    border-radius: 20px;
+    box-shadow: 0 2px 10px var(--shadow);
+    transition: transform 0.2s;
+}
+
+.app-name:hover {
+    transform: translateY(-2px);
+}
+
+.app-icon {
+    font-size: 1rem;
+}
+
+/* Add these styles */
+.app-name, .reading-info, .tts-controls {
+    transition: opacity 0.3s, visibility 0.3s;
+}
+
+.hide-ui .app-name,
+.hide-ui .reading-info,
+.hide-ui .tts-controls {
+    opacity: 0;
+    visibility: hidden;
+}

api/static/js/story.js

@@ -0,0 +1,396 @@
+
+let currentSessionId = null;
+let isGenerating = false;
+let lastScrollPosition = 0;
+let baseFontSize = 1.2;
+let isTTSActive = false;
+let speechSynthesis = window.speechSynthesis;
+let speechUtterance = null;
+
+// Genre-Theme Mapping
+const genreThemes = {
+    fantasy: [
+        { value: 'magic', label: 'Magic & Wizardry' },
+        { value: 'dragons', label: 'Dragons & Creatures' },
+        { value: 'quest', label: 'Epic Quest' },
+        { value: 'mythology', label: 'Mythology & Legends' },
+        { value: 'medieval', label: 'Medieval Adventure' }
+    ],
+    'sci-fi': [
+        { value: 'space', label: 'Space Exploration' },
+        { value: 'ai', label: 'Artificial Intelligence' },
+        { value: 'dystopia', label: 'Dystopian Future' },
+        { value: 'aliens', label: 'First Contact' },
+        { value: 'cyberpunk', label: 'Cyberpunk' }
+    ],
+    mystery: [
+        { value: 'detective', label: 'Detective Story' },
+        { value: 'thriller', label: 'Psychological Thriller' },
+        { value: 'crime', label: 'Crime Investigation' },
+        { value: 'supernatural', label: 'Supernatural Mystery' }
+    ],
+    romance: [
+        { value: 'contemporary', label: 'Contemporary Romance' },
+        { value: 'historical', label: 'Historical Romance' },
+        { value: 'paranormal', label: 'Paranormal Romance' },
+        { value: 'comedy', label: 'Romantic Comedy' }
+    ],
+    horror: [
+        { value: 'supernatural', label: 'Supernatural Horror' },
+        { value: 'psychological', label: 'Psychological Horror' },
+        { value: 'gothic', label: 'Gothic Horror' },
+        { value: 'cosmic', label: 'Cosmic Horror' }
+    ],
+    historical: [
+        { value: 'ancient', label: 'Ancient Civilizations' },
+        { value: 'medieval', label: 'Medieval Times' },
+        { value: 'renaissance', label: 'Renaissance' },
+        { value: 'modern', label: 'Modern History' }
+    ],
+    adventure: [
+        { value: 'exploration', label: 'Exploration' },
+        { value: 'survival', label: 'Survival' },
+        { value: 'treasure', label: 'Treasure Hunt' },
+        { value: 'journey', label: 'Epic Journey' }
+    ]
+};
+
+// Add this new function to calculate and update the progress bar
+function updateProgressBar() {
+    const winScroll = window.pageYOffset || document.documentElement.scrollTop;
+    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    const scrolled = (winScroll / height) * 100;
+    document.getElementById('progress').style.width = scrolled + '%';
+}
+
+// Add scroll event listener to update progress bar
+window.addEventListener('scroll', () => {
+    updateProgressBar();
+});
+
+// Update the existing scroll event listener to include both progress bar and infinite scroll
+window.addEventListener('scroll', async () => {
+    // Update progress bar
+    updateProgressBar();
+
+    // Existing infinite scroll logic
+    if (isGenerating || !currentSessionId) return;
+
+    const scrollPosition = window.innerHeight + window.scrollY;
+    const documentHeight = document.documentElement.offsetHeight;
+    
+    if (scrollPosition > documentHeight - 300 && scrollPosition > lastScrollPosition) {
+        isGenerating = true;
+        addLoadingIndicator();
+
+        try {
+            const response = await fetch('/continue-story', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    session_id: currentSessionId,
+                    branch_choice: 'main'
+                })
+            });
+            
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            
+            removeLoadingIndicator();
+            addStoryParagraph(data.continuation);
+        } catch (error) {
+            console.error('Error:', error);
+            removeLoadingIndicator();
+        }
+
+        isGenerating = false;
+        lastScrollPosition = scrollPosition;
+    }
+});
+
+function addStoryParagraph(text) {
+    const container = document.getElementById('story-container');
+    
+    // Create a pre element to preserve formatting
+    const pre = document.createElement('pre');
+    pre.className = 'story-paragraph';
+    pre.style.fontSize = `${baseFontSize}rem`;
+    pre.textContent = text;
+    
+    container.appendChild(pre);
+    updateReadingTime();
+    updateProgressBar();
+}
+
+// Menu Toggle
+const menuToggle = document.getElementById('menuToggle');
+const settingsPanel = document.getElementById('settingsPanel');
+
+menuToggle.addEventListener('click', () => {
+    settingsPanel.classList.toggle('active');
+    document.body.classList.toggle('hide-ui');
+});
+
+// Close menu when clicking outside
+document.addEventListener('click', (e) => {
+    if (!settingsPanel.contains(e.target) && e.target !== menuToggle) {
+        settingsPanel.classList.remove('active');
+        document.body.classList.remove('hide-ui');
+    }
+});
+
+// Theme Toggle
+const themeToggle = document.getElementById('theme-toggle');
+const root = document.documentElement;
+const themeIcon = document.getElementById('theme-icon');
+
+themeToggle.addEventListener('click', () => {
+    const currentTheme = root.getAttribute('data-theme');
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    root.setAttribute('data-theme', newTheme);
+    themeIcon.textContent = newTheme === 'light' ? '🌙' : '☀️';
+    localStorage.setItem('theme', newTheme);
+});
+
+// Load saved theme
+const savedTheme = localStorage.getItem('theme') || 'light';
+root.setAttribute('data-theme', savedTheme);
+themeIcon.textContent = savedTheme === 'light' ? '🌙' : '☀️';
+
+// Update themes based on genre selection
+function updateThemes(genre) {
+    const themeSelect = document.getElementById('theme');
+    themeSelect.innerHTML = '';
+    
+    genreThemes[genre].forEach(theme => {
+        const option = document.createElement('option');
+        option.value = theme.value;
+        option.textContent = theme.label;
+        themeSelect.appendChild(option);
+    });
+}
+
+// Reading Time Estimation
+function updateReadingTime() {
+    const text = document.getElementById('story-container').textContent;
+    const wordCount = text.trim().split(/\s+/).length;
+    const minutes = Math.ceil(wordCount / 200); // Average reading speed
+    document.getElementById('readingTime').textContent = `${minutes} min read`;
+}
+
+// Font size controls
+function changeFontSize(delta) {
+    baseFontSize = Math.max(0.8, Math.min(1.6, baseFontSize + delta * 0.1));
+    document.querySelectorAll('.story-paragraph').forEach(p => {
+        p.style.fontSize = `${baseFontSize}rem`;
+    });
+    localStorage.setItem('fontSize', baseFontSize);
+}
+
+function updateFontFamily(fontFamily) {
+    document.querySelectorAll('.story-paragraph').forEach(p => {
+        p.style.fontFamily = fontFamily;
+    });
+    document.body.style.fontFamily = `${fontFamily}, Georgia, serif`;
+}
+
+// Text-to-Speech Functions
+function setupTTS() {
+    const ttsToggle = document.getElementById('ttsToggle');
+    
+    ttsToggle.addEventListener('click', () => {
+        if (!isTTSActive) {
+            startTTS();
+        } else {
+            stopTTS();
+        }
+    });
+}
+
+function startTTS() {
+    if (speechSynthesis && !isTTSActive) {
+        const text = document.getElementById('story-container').textContent;
+        speechUtterance = new SpeechSynthesisUtterance(text);
+        speechUtterance.rate = 0.9;
+        speechSynthesis.speak(speechUtterance);
+        isTTSActive = true;
+        document.getElementById('ttsToggle').classList.add('active');
+    }
+}
+
+function stopTTS() {
+    if (speechSynthesis) {
+        speechSynthesis.cancel();
+        isTTSActive = false;
+        document.getElementById('ttsToggle').classList.remove('active');
+    }
+}
+
+// Touch Gestures
+function setupTouchGestures() {
+    let touchStartX = 0;
+    let touchEndX = 0;
+    
+    document.addEventListener('touchstart', e => {
+        touchStartX = e.changedTouches[0].screenX;
+    }, false);
+
+    document.addEventListener('touchend', e => {
+        touchEndX = e.changedTouches[0].screenX;
+        handleSwipe();
+    }, false);
+
+    function handleSwipe() {
+        const swipeThreshold = 100;
+        const diff = touchEndX - touchStartX;
+        
+        if (Math.abs(diff) > swipeThreshold) {
+            if (diff > 0) {
+                // Swipe right - open settings
+                settingsPanel.classList.add('active');
+                document.body.classList.add('hide-ui');
+            } else {
+                // Swipe left - close settings
+                settingsPanel.classList.remove('active');
+                document.body.classList.remove('hide-ui');
+            }
+        }
+    }
+}
+
+// Story generation and display
+async function startStory() {
+    const genre = document.getElementById('genre').value;
+    const theme = document.getElementById('theme').value;
+    
+    try {
+        const storyContainer = document.getElementById('story-container');
+        // Show initial loading animation only if this is the first story
+        if (!currentSessionId) {
+            storyContainer.innerHTML = `
+                <div class="initial-loading">
+                    <div class="quill-loading"></div>
+                    <h3>Crafting your story...</h3>
+                    <p>Our AI storyteller is weaving a tale just for you</p>
+                </div>
+            `;
+        }
+        
+        const response = await fetch('/start-story', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ genre, theme })
+        });
+        
+        const data = await response.json();
+        if (data.error) throw new Error(data.error);
+        
+        currentSessionId = data.session_id;
+        storyContainer.innerHTML = '';
+        addStoryParagraph(data.story);
+        settingsPanel.classList.remove('active');
+        updateReadingTime();
+        stopTTS();
+    } catch (error) {
+        console.error('Error:', error);
+    }
+}
+
+function addStoryParagraph(text) {
+    const p = document.createElement('p');
+    p.className = 'story-paragraph';
+    p.style.fontSize = `${baseFontSize}rem`;
+    p.textContent = text;
+    document.getElementById('story-container').appendChild(p);
+    updateReadingTime();
+}
+
+function addLoadingIndicator() {
+    const loading = document.createElement('div');
+    loading.className = 'loading';
+    loading.innerHTML = `
+        <div class="loading-dots">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    `;
+    document.getElementById('story-container').appendChild(loading);
+}
+
+function removeLoadingIndicator() {
+    const loading = document.querySelector('.loading');
+    if (loading) loading.remove();
+}
+
+// Infinite scroll
+window.addEventListener('scroll', async () => {
+    if (isGenerating || !currentSessionId) return;
+
+    const scrollPosition = window.innerHeight + window.scrollY;
+    const documentHeight = document.documentElement.offsetHeight;
+    
+    if (scrollPosition > documentHeight - 300 && scrollPosition > lastScrollPosition) {
+        isGenerating = true;
+        addLoadingIndicator();
+
+        try {
+            const response = await fetch('/continue-story', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    session_id: currentSessionId,
+                    branch_choice: 'main'
+                })
+            });
+            
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            
+            removeLoadingIndicator();
+            addStoryParagraph(data.continuation);
+        } catch (error) {
+            console.error('Error:', error);
+            removeLoadingIndicator();
+        }
+
+        isGenerating = false;
+        lastScrollPosition = scrollPosition;
+    }
+});
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    // Setup initial themes
+    updateThemes(document.getElementById('genre').value);
+    
+    // Setup genre change listener
+    document.getElementById('genre').addEventListener('change', (e) => {
+        updateThemes(e.target.value);
+        startStory();
+    });
+
+    // Setup theme change listener
+    document.getElementById('theme').addEventListener('change', startStory);
+
+    // Setup TTS
+    setupTTS();
+
+    // Setup touch gestures
+    setupTouchGestures();
+
+    // Setup font family change listener
+    document.getElementById('fontFamily').addEventListener('change', (e) => {
+        updateFontFamily(e.target.value);
+    });
+
+    // Load saved font family
+    const savedFontFamily = localStorage.getItem('fontFamily');
+    if (savedFontFamily) {
+        document.getElementById('fontFamily').value = savedFontFamily;
+        updateFontFamily(savedFontFamily);
+    }
+
+    // Start initial story
+    startStory();
+});

api/templates/index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lore Keeper</title>
+    <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/logo.webp') }}">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <a href="#" class="app-name">
+        <span class="app-icon">📚</span>
+        <span>Lore Keeper</span>
+    </a>
+    <div class="progress-bar">
+        <div class="progress" id="progress"></div>
+    </div>
+
+    <button class="menu-toggle" id="menuToggle">☰</button>
+    
+    <div class="settings-panel" id="settingsPanel">
+        <div class="settings-header">
+            <h2>Story Settings</h2>
+        </div>
+        <div class="settings-content">
+            <div class="settings-section">
+                <h3>Genre</h3>
+                <select id="genre">
+                    <option value="fantasy">Fantasy</option>
+                    <option value="sci-fi">Science Fiction</option>
+                    <option value="mystery">Mystery</option>
+                    <option value="romance">Romance</option>
+                    <option value="horror">Horror</option>
+                    <option value="historical">Historical Fiction</option>
+                    <option value="adventure">Adventure</option>
+                </select>
+            </div>
+
+            <div class="settings-section">
+                <h3>Theme</h3>
+                <select id="theme"></select>
+            </div>
+
+            <div class="settings-section">
+                <h3>Appearance</h3>
+                <div class="appearance-controls">
+                    <select id="fontFamily" class="font-family-select">
+                        <option value="Crimson Text">Crimson Text</option>
+                        <option value="Georgia">Georgia</option>
+                        <option value="Palatino">Palatino</option>
+                        <option value="Baskerville">Baskerville</option>
+                    </select>
+
+                    <div class="font-size-controls">
+                        <button class="font-size-btn" onclick="changeFontSize(-1)">A-</button>
+                        <button class="font-size-btn" onclick="changeFontSize(1)">A+</button>
+                    </div>
+
+                    <button class="theme-toggle" id="theme-toggle">
+                        <span id="theme-icon">🌙</span>
+                        <span>Toggle Theme</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Reading Info -->
+    <div class="reading-info">
+        <span class="material-icons">schedule</span>
+        <span id="readingTime">0 min read</span>
+    </div>
+
+    <!-- Add Text-to-Speech Controls -->
+    <div class="tts-controls">
+        <button class="tts-btn" id="ttsToggle" title="Toggle Text-to-Speech">
+            <span class="material-icons">volume_up</span>
+        </button>
+    </div>
+
+    <!-- Add Swipe Indicator -->
+    <div class="swipe-indicator" id="swipeIndicator">
+        Swipe for more options
+    </div>
+
+    <div class="story-container" id="story-container"></div>
+
+    <script src="{{ url_for('static', filename='js/story.js') }}"></script>
+</body>
+</html>

readme.md

@@ -0,0 +1,118 @@
+# 📚 Lore Keeper
+
+![Lore Keeper Banner](./data/banner.webp)
+
+An elegant AI-powered storytelling platform that creates personalized stories across multiple genres using Google's Gemini AI.
+
+## ✨ Features
+
+### 🎭 Genre & Theme Selection
+- Multiple genres including Fantasy, Sci-Fi, Mystery, Romance, Horror, Historical Fiction, and Adventure
+- Customizable themes within each genre
+- Dynamic story generation based on selected preferences
+
+### 📖 Reading Experience
+- Clean, distraction-free reading interface
+- Progress bar tracking
+- Estimated reading time
+- Infinite scroll for continuous story generation
+- Text-to-Speech functionality
+- Customizable font settings
+  - Multiple font families
+  - Adjustable font size
+  - Dark/Light theme toggle
+
+### 📱 Mobile-Friendly
+- Responsive design
+- Touch gestures support
+- Swipe navigation for settings
+- Mobile-optimized UI elements
+
+### 🎨 Customization
+- Theme switching (Light/Dark mode)
+- Font family selection
+- Text size adjustment
+- Reading progress tracking
+
+## 🚀 Getting Started
+
+### Prerequisites
+- Python 3.8+
+- Flask
+- Google Generative AI API key
+
+### Installation
+
+1. Clone the repository
+```bash
+git clone https://github.com/yourusername/lore-keeper.git
+cd lore-keeper
+```
+2. Install dependencies
+```bash
+pip install -r requirements.txt
+```
+3. Set up Google Generative AI API key
+- Obtain an API key from Google Cloud Console
+- Set the `GOOGLE_API_KEY` environment variable
+```bash
+export GOOGLE_API_KEY='your_api_key_here'
+``` 
+4. Run the application
+```bash
+python api/app.py
+``` 
+
+## 🛠️ Technology Stack
+
+- **Frontend**: HTML5, CSS3, JavaScript
+- **Backend**: Flask (Python)
+- **AI**: Google Gemini 1.5 Flash
+- **Styling**: Custom CSS with CSS Variables
+- **Fonts**: Google Fonts (Crimson Text)
+
+## 🎯 Usage
+
+1. Select your preferred genre and theme
+2. Start reading the generated story
+3. Scroll to automatically generate more content
+4. Use the settings panel to customize your reading experience
+5. Toggle Text-to-Speech for audio narration
+
+## 🎨 Customization Options
+
+### Themes
+- Light Mode
+- Dark Mode
+
+### Fonts
+- Crimson Text
+- Georgia
+- Palatino
+- Baskerville
+
+### Reading Features
+- Adjustable font size
+- Progress tracking
+- Reading time estimation
+- Text-to-Speech
+
+## 📱 Mobile Features
+
+- Swipe gestures for navigation
+- Mobile-optimized layout
+- Touch-friendly controls
+- Responsive design
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 🙏 Acknowledgments
+
+- Google Generative AI for the story generation
+- Flask community for the excellent web framework
+
+---
+
+<p align="center">Made with ❤️ for storytelling enthusiasts</p>

requirements.txt

@@ -0,0 +1,3 @@
+Flask
+google-generativeai
+Flask-Cors

vercel.json

@@ -0,0 +1,5 @@
+{
+    "rewrites": [
+      { "source": "/(.*)", "destination": "/api/app" }
+    ]
+  }