Create a modern frontend and update backend API

models/chat.py

@@ -10,23 +10,23 @@ class ChatMessage(BaseModel):
     role: str = Field(..., description="Role of the message sender (system, user, assistant)")
     content: Union[str, List[MessageContent]] = Field(..., description="Message content - string for simple text or list for mixed content")
 
-class ChatSettings(BaseModel):
-    temperature: float = Field(1.0, ge=0.0, le=2.0)
-    top_p: float = Field(0.8, ge=0.0, le=1.0)
-    reasoning_effort: Literal["low", "medium", "high"] = "low"
+# New model to receive language and subject
+class PromptSettings(BaseModel):
+    language: str = "English"
+    subject: str = "General"
+    words_limit: int = 100
 
 class ChatRequest(BaseModel):
     messages: List[ChatMessage] = Field(..., description="List of messages in the conversation")
-    settings: Optional[ChatSettings] = Field(default_factory=ChatSettings)
-    command: Optional[Literal["search", "url_context"]] = None
+    # This field will now carry the prompt settings from the frontend
+    prompt_settings: PromptSettings = Field(default_factory=PromptSettings)
+    command: Optional[Literal["search"]] = None
 
 class ChatResponse(BaseModel):
     content: str
-    reasoning_content: Optional[str] = None
     error: Optional[str] = None
 
 class StreamResponse(BaseModel):
     content: Optional[str] = None
-    reasoning_content: Optional[str] = None
     finished: bool = False
     error: Optional[str] = None

prompts.py

@@ -1,8 +1,18 @@
 # prompts.py
-# Replace this with your actual system prompt
 
-SYSTEM_PROMPT = """You are a helpful AI assistant. You can analyze text and images, answer questions, and help with various tasks.
+SYSTEM_PROMPT = """You are a friendly and encouraging AI homework assistant for students.
+Your primary goal is to help students learn and understand their school subjects, not just to give them the answers.
 
-When provided with images, analyze them carefully and describe what you see. When asked to search for information, use the available tools to find current information.
+**Your current instructions:**
+- **Respond in:** {language} under {words_limit} words
+- **Focus on the subject:** {subject}
 
-Be helpful, accurate, and concise in your responses."""
+**Behavioral Guidelines:**
+- If the subject is "Maths," provide step-by-step solutions and explain the reasoning behind each step.
+- If it's a science subject, explain the core concepts and definitions.
+- If it's "History" or "Geography," provide context, key dates, and important facts.
+- For language subjects like "English" or "Urdu," help with grammar, translation, and comprehension.
+- When analyzing images, describe what you see and how it relates to the user's question.
+- If you do not know the answer or a question is outside of a typical school subject, say so politely.
+- Your tone should always be patient, helpful, and supportive.
+"""

services/chat_service.py

@@ -2,7 +2,7 @@ import os
 from typing import List, Dict, Any, Optional, AsyncGenerator
 from litellm import acompletion
 
-from models.chat import ChatRequest, ChatResponse, StreamResponse
+from models.chat import ChatRequest, StreamResponse
 from prompts import SYSTEM_PROMPT
 
 class ChatService:
@@ -13,125 +13,60 @@ class ChatService:
         if not self.api_key:
             raise ValueError("GOOGLE_API_KEY environment variable is required")
 
-    async def process_chat(self, request: ChatRequest) -> ChatResponse:
-        """Process a complete chat request and return the response"""
-        try:
-            # Prepare messages with system prompt
-            messages = self._prepare_messages(request)
-            
-            # Prepare tools based on command
-            tools = self._prepare_tools(request.command)
-            
-            # Make the API call
-            response = await acompletion(
-                model=self.model,
-                messages=messages,
-                temperature=request.settings.temperature,
-                top_p=request.settings.top_p,
-                reasoning_effort=request.settings.reasoning_effort,
-                api_key=self.api_key,
-                tools=tools,
-                stream=False
-            )
-            
-            content = response.choices[0].message.content or ""
-            reasoning_content = getattr(response.choices[0].message, "reasoning_content", None)
-            
-            return ChatResponse(
-                content=content,
-                reasoning_content=reasoning_content
-            )
-            
-        except Exception as e:
-            return ChatResponse(
-                content="",
-                error=str(e)
-            )
-
     async def stream_chat(self, request: ChatRequest) -> AsyncGenerator[StreamResponse, None]:
         """Stream chat response"""
         try:
-            # Prepare messages with system prompt
+            # Pass the entire request to format the system prompt
             messages = self._prepare_messages(request)
-            
-            # Prepare tools based on command
             tools = self._prepare_tools(request.command)
             
-            # Make the streaming API call
-            response = await acompletion(
-                model=self.model,
-                messages=messages,
-                temperature=request.settings.temperature,
-                top_p=request.settings.top_p,
-                reasoning_effort=request.settings.reasoning_effort,
-                api_key=self.api_key,
-                tools=tools,
-                stream=True
-            )
+            completion_params = {
+                "model": self.model,
+                "messages": messages,
+                "temperature": 0.7,
+                "top_p": 1.0,
+                "api_key": self.api_key,
+                "stream": True
+            }
+            if tools:
+                completion_params["tools"] = tools
+
+            response = await acompletion(**completion_params)
             
             async for part in response:
-                chunk_response = StreamResponse()
-                
-                if hasattr(part.choices[0].delta, "reasoning_content"):
-                    reasoning = part.choices[0].delta.reasoning_content or ""
-                    if reasoning:
-                        chunk_response.reasoning_content = reasoning
-                
                 content = part.choices[0].delta.content or ""
                 if content:
-                    chunk_response.content = content
-                
-                if chunk_response.content or chunk_response.reasoning_content:
-                    yield chunk_response
+                    yield StreamResponse(content=content)
                     
         except Exception as e:
             yield StreamResponse(error=str(e), finished=True)
 
     def _prepare_messages(self, request: ChatRequest) -> List[Dict[str, Any]]:
-        """Prepare messages with system prompt"""
-        messages = []
+        """Prepare messages with a dynamically formatted system prompt"""
         
-        # Add system message first
-        messages.append({
-            "role": "system", 
-            "content": SYSTEM_PROMPT
-        })
+        # Format the system prompt with settings from the request
+        formatted_system_prompt = SYSTEM_PROMPT.format(
+            language=request.prompt_settings.language,
+            subject=request.prompt_settings.subject
+        )
+        
+        messages = [{"role": "system", "content": formatted_system_prompt}]
         
-        # Add all messages from the request
         for message in request.messages:
             if message.role == "system":
-                continue  # Skip additional system messages since we already added one
-                
-            # Convert message to dict format expected by litellm
+                continue
+            
             if isinstance(message.content, str):
-                # Simple text message
-                messages.append({
-                    "role": message.role,
-                    "content": message.content
-                })
+                messages.append({"role": message.role, "content": message.content})
             else:
-                # Complex content with text and/or images
-                content_parts = []
-                for part in message.content:
-                    if hasattr(part, 'dict'):
-                        content_parts.append(part.dict())
-                    elif isinstance(part, dict):
-                        content_parts.append(part)
-                
-                messages.append({
-                    "role": message.role,
-                    "content": content_parts
-                })
+                content_parts = [part.model_dump() for part in message.content]
+                messages.append({"role": message.role, "content": content_parts})
         
         return messages
 
-    def _prepare_tools(self, command: str) -> List[Dict[str, Any]]:
+    def _prepare_tools(self, command: Optional[str]) -> Optional[List[Dict[str, Any]]]:
         """Prepare tools based on the command"""
-        tools = []
-        
         if command == "search":
-            tools = [{"googleSearch": {}}]
-        elif command == "url_context":
-            tools = [{"urlContext": {}}]
-            
-        return tools
+            # This specific format enables Gemini's native search via litellm
+            return [{"googleSearch": {}}]
+        return None # Return None when no tools are used

static/app.js

@@ -1,239 +0,0 @@
-const messagesEl = document.getElementById('messages');
-const formEl = document.getElementById('chat-form');
-const inputEl = document.getElementById('user-input');
-const sendBtn = document.getElementById('send-btn');
-const statusEl = document.getElementById('status');
-const commandEl = document.getElementById('command');
-const imageInput = document.getElementById('image-input');
-const addImageBtn = document.getElementById('add-image-btn');
-const clearImagesBtn = document.getElementById('clear-images-btn');
-const imagePreviews = document.getElementById('image-previews');
-
-// Conversation state
-let conversation = [];
-let pendingImages = []; // data URLs
-
-function renderMessage(message, isStreaming = false) {
-  const wrapper = document.createElement('div');
-  wrapper.className = `message role-${message.role}`;
-
-  const avatar = document.createElement('div');
-  avatar.className = 'avatar';
-  avatar.textContent = message.role === 'user' ? 'U' : 'A';
-
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble';
-  if (isStreaming) bubble.classList.add('assistant-streaming');
-  // Text
-  let text = '';
-  if (typeof message.content === 'string') {
-    text = message.content;
-  } else if (Array.isArray(message.content)) {
-    const textPart = message.content.find(p => p.type === 'text');
-    text = textPart?.text || '';
-  }
-  const textNode = document.createElement('div');
-  textNode.innerText = text;
-  bubble.appendChild(textNode);
-
-  // Images
-  if (Array.isArray(message.content)) {
-    const images = message.content.filter(p => p.type === 'image_url');
-    if (images.length) {
-      const imgWrap = document.createElement('div');
-      imgWrap.className = 'bubble-images';
-      for (const img of images) {
-        const el = document.createElement('img');
-        el.src = img.image_url?.url || '';
-        imgWrap.appendChild(el);
-      }
-      bubble.appendChild(imgWrap);
-    }
-  }
-
-  wrapper.appendChild(avatar);
-  wrapper.appendChild(bubble);
-  messagesEl.appendChild(wrapper);
-  messagesEl.scrollTop = messagesEl.scrollHeight;
-  return bubble; // return bubble for incremental updates
-}
-
-function setBusy(busy) {
-  sendBtn.disabled = busy;
-  statusEl.textContent = busy ? 'Thinking…' : 'Ready';
-}
-
-function buildRequestPayload(command) {
-  return {
-    messages: conversation,
-    settings: {
-      temperature: 1.0,
-      top_p: 0.8,
-      reasoning_effort: 'low'
-    },
-    command: command || null
-  };
-}
-
-async function sendChat(command) {
-  setBusy(true);
-  const userMsg = conversation[conversation.length - 1];
-  renderMessage(userMsg);
-  const assistantMsg = { role: 'assistant', content: '' };
-  const assistantBubble = renderMessage(assistantMsg, true);
-
-  try {
-    const res = await fetch('/api/chat/stream', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(buildRequestPayload(command))
-    });
-
-    if (!res.ok || !res.body) {
-      throw new Error(`Request failed: ${res.status}`);
-    }
-
-    const reader = res.body.getReader();
-    const decoder = new TextDecoder();
-    let assistantText = '';
-    while (true) {
-      const { value, done } = await reader.read();
-      if (done) break;
-      const chunk = decoder.decode(value, { stream: true });
-
-      // SSE-style lines: data: {json}\n\n
-      const lines = chunk.split('\n');
-      for (const line of lines) {
-        if (!line.startsWith('data:')) continue;
-        const jsonStr = line.replace('data: ', '');
-        if (!jsonStr) continue;
-        try {
-          const data = JSON.parse(jsonStr);
-          if (data.error) {
-            throw new Error(data.error);
-          }
-          if (data.content) {
-            assistantText += data.content;
-            assistantBubble.firstChild.innerText = assistantText;
-          }
-          if (data.reasoning_content) {
-            // Optionally, we could display reasoning in a muted style
-          }
-          if (data.finished) {
-            assistantBubble.classList.remove('assistant-streaming');
-            // Push final assistant message to history
-            conversation.push({ role: 'assistant', content: assistantText });
-          }
-        } catch (e) {
-          // non-JSON line, ignore
-        }
-      }
-    }
-  } catch (err) {
-    assistantBubble.classList.remove('assistant-streaming');
-    assistantBubble.firstChild.innerText = `Error: ${err.message}`;
-    assistantBubble.classList.add('error');
-  } finally {
-    setBusy(false);
-    try { localStorage.setItem('sha_conversation', JSON.stringify(conversation)); } catch {}
-  }
-}
-
-formEl.addEventListener('submit', (e) => {
-  e.preventDefault();
-  const text = inputEl.value.trim();
-  const command = commandEl.value;
-  if (!text && pendingImages.length === 0) return;
-
-  const contentParts = [];
-  if (text) contentParts.push({ type: 'text', text });
-  for (const url of pendingImages) {
-    contentParts.push({ type: 'image_url', image_url: { url } });
-  }
-
-  const userMsg = contentParts.length === 1 && text
-    ? { role: 'user', content: text }
-    : { role: 'user', content: contentParts };
-
-  conversation.push(userMsg);
-
-  inputEl.value = '';
-  clearPendingImages();
-  sendChat(command);
-});
-
-// Auto-resize textarea
-inputEl.addEventListener('input', () => {
-  inputEl.style.height = 'auto';
-  inputEl.style.height = Math.min(inputEl.scrollHeight, 120) + 'px';
-});
-
-// Focus input on load and restore session
-window.addEventListener('load', () => {
-  inputEl.focus();
-  try {
-    const saved = localStorage.getItem('sha_conversation');
-    if (saved) {
-      conversation = JSON.parse(saved);
-      messagesEl.innerHTML = '';
-      for (const msg of conversation) {
-        renderMessage(msg);
-      }
-    }
-  } catch {}
-});
-
-// Image handling
-addImageBtn.addEventListener('click', () => imageInput.click());
-imageInput.addEventListener('change', async (e) => {
-  const files = Array.from(e.target.files || []);
-  for (const file of files) {
-    const dataUrl = await fileToDataUrl(file);
-    pendingImages.push(dataUrl);
-  }
-  renderPendingImages();
-  imageInput.value = '';
-});
-
-clearImagesBtn.addEventListener('click', () => {
-  pendingImages = [];
-  renderPendingImages();
-});
-
-function fileToDataUrl(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-}
-
-function renderPendingImages() {
-  imagePreviews.innerHTML = '';
-  pendingImages.forEach((url, idx) => {
-    const wrap = document.createElement('div');
-    wrap.className = 'image-preview';
-    const img = document.createElement('img');
-    img.src = url;
-    const btn = document.createElement('button');
-    btn.className = 'remove';
-    btn.type = 'button';
-    btn.textContent = '×';
-    btn.addEventListener('click', () => {
-      pendingImages.splice(idx, 1);
-      renderPendingImages();
-    });
-    wrap.appendChild(img);
-    wrap.appendChild(btn);
-    imagePreviews.appendChild(wrap);
-  });
-}
-
-function clearPendingImages() {
-  pendingImages = [];
-  renderPendingImages();
-}
-
-
-

static/index.html

@@ -4,44 +4,124 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Student Homework Assistant</title>
-    <link rel="stylesheet" href="/static/styles.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js" defer></script>
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+    <link rel="stylesheet" href="/static/style.css">
+    <script src="/static/script.js" defer></script>
 </head>
 <body>
-    <div class="app">
-        <header class="app-header">
-            <div class="brand">Student Homework Assistant</div>
-            <div class="status" id="status">Ready</div>
-        </header>
+    <div id="app-wrapper">
+        <!-- Home Page - Shown initially -->
+        <div id="home-page">
+            <div class="home-content">
+                <div class="logo"><i class="fa-solid fa-brain"></i></div>
+                <h1>Flexx: Your Homework Assistant</h1>
+                <p>Stuck on a problem? Need help with a subject? Just ask! You can type, upload, or snap a photo of your question.</p>
+                <div class="start-prompt">
+                    <p>Let's get started. What can I help you with today?</p>
+                </div>
+            </div>
+        </div>
 
-        <main class="chat-container">
-            <div id="messages" class="messages" aria-live="polite"></div>
+        <!-- Chat Interface - Hidden initially -->
+        <div id="chat-container" class="hidden">
+            <div id="chat-messages">
+                <!-- Chat messages will be dynamically inserted here -->
+            </div>
+        </div>
 
-            <form id="chat-form" class="chat-input" autocomplete="off">
-                <select id="command" class="command-select" title="Command">
-                    <option value="">Chat</option>
-                    <option value="search">Search</option>
-                    <option value="url_context">URL Context</option>
-                </select>
-                <div class="input-area">
-                    <div id="image-previews" class="image-previews" aria-live="polite"></div>
-                    <textarea id="user-input" placeholder="Ask a question..." rows="1"></textarea>
-                </div>
-                <div class="actions">
-                    <input id="image-input" type="file" accept="image/*" hidden>
-                    <button id="add-image-btn" type="button" class="icon-btn" title="Add image" aria-label="Add image">📷</button>
-                    <button id="clear-images-btn" type="button" class="icon-btn" title="Clear images" aria-label="Clear images">✖️</button>
-                    <button id="send-btn" type="submit" class="send-btn">Send</button>
+        <!-- Input Area - Always Visible -->
+        <div id="input-area">
+            <div id="image-preview-container"></div>
+            <div class="input-bar">
+                <!-- Mobile Menu Button -->
+                <button id="mobile-menu-btn" class="icon-btn mobile-only"><i class="fa-solid fa-paperclip"></i></button>
+
+                <!-- Desktop Icons -->
+                <div class="desktop-icons">
+                    <button id="upload-btn" class="icon-btn" title="Upload Image"><i class="fa-solid fa-upload"></i></button>
+                    <input type="file" id="image-upload" accept="image/*" style="display: none;">
+                    <button id="camera-btn" class="icon-btn" title="Capture Photo"><i class="fa-solid fa-camera"></i></button>
+                    <button id="search-toggle-btn" class="icon-btn" title="Toggle Web Search"><i class="fa-solid fa-globe"></i></button>
+                    <button id="settings-btn" class="icon-btn" title="Settings"><i class="fa-solid fa-cog"></i></button>
                 </div>
-            </form>
-        </main>
+                
+                <textarea id="message-input" placeholder="Type your message, or upload a photo..." rows="1"></textarea>
+                <button id="send-btn" title="Send"><i class="fa-solid fa-arrow-up"></i></button>
+            </div>
+        </div>
     </div>
 
-    <script src="/static/app.js"></script>
-</body>
-<!-- More content could be added here (settings, history) -->
-</html>
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="modal-overlay">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Preferences</h2>
+                <button class="close-btn">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="setting">
+                    <label for="response-language">Response Language</label>
+                    <div class="custom-select">
+                        <select id="response-language">
+                            <option value="English">English</option>
+                            <option value="Urdu">Urdu</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="setting">
+                    <label for="subject">Subject</label>
+                    <div class="custom-select">
+                        <select id="subject">
+                            <option value="General">General</option>
+                            <option value="English">English</option>
+                            <option value="Urdu">Urdu</option>
+                            <option value="Science">Science</option>
+                            <option value="Maths">Maths</option>
+                            <option value="Geography">Geography</option>
+                            <option value="History">History</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="setting">
+                    <label for="words-limit">Words Limit: <span id="words-limit-value">100</span></label>
+                    <input type="range" id="words-limit" min="50" max="500" value="100" class="slider">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button id="save-settings-btn" class="modal-button">Save</button>
+            </div>
+        </div>
+    </div>
 
+    <!-- Camera Modal -->
+    <div id="camera-modal" class="modal-overlay">
+        <div class="modal-content">
+            <div class="modal-header"><h2>Capture Photo</h2><button class="close-btn">&times;</button></div>
+            <div class="modal-body"><video id="camera-stream" autoplay playsinline></video><canvas id="camera-canvas" style="display:none;"></canvas></div>
+            <div class="modal-footer"><button id="capture-btn" class="modal-button"><i class="fa-solid fa-camera-retro"></i> Capture</button></div>
+        </div>
+    </div>
+    
+    <!-- Cropper Modal -->
+    <div id="cropper-modal" class="modal-overlay">
+        <div class="modal-content wide">
+            <div class="modal-header"><h2>Crop Image</h2><button class="close-btn">&times;</button></div>
+            <div class="modal-body"><div class="cropper-container"><img id="image-to-crop" src="" alt="Image for cropping"></div></div>
+            <div class="modal-footer"><button id="crop-confirm-btn" class="modal-button"><i class="fa-solid fa-crop-simple"></i> Confirm Crop</button></div>
+        </div>
+    </div>
+    
+    <!-- Lightbox Modal -->
+    <div id="lightbox-modal" class="modal-overlay lightbox">
+        <span class="close-btn">&times;</span><img class="lightbox-content" id="lightbox-img">
+    </div>
 
+</body>
+</html>

static/script.js

@@ -0,0 +1,266 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // DOM Elements
+    const homePage = document.getElementById('home-page');
+    const chatContainer = document.getElementById('chat-container');
+    const chatMessages = document.getElementById('chat-messages');
+    const messageInput = document.getElementById('message-input');
+    const sendBtn = document.getElementById('send-btn');
+    const imagePreviewContainer = document.getElementById('image-preview-container');
+    
+    // Action Buttons
+    const uploadBtn = document.getElementById('upload-btn');
+    const imageUpload = document.getElementById('image-upload');
+    const cameraBtn = document.getElementById('camera-btn');
+    const settingsBtn = document.getElementById('settings-btn');
+    const searchToggleBtn = document.getElementById('search-toggle-btn');
+    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+    const desktopIconsContainer = document.querySelector('.desktop-icons');
+
+    // Modals
+    const settingsModal = document.getElementById('settings-modal');
+    const cameraModal = document.getElementById('camera-modal');
+    const cropperModal = document.getElementById('cropper-modal');
+    const lightboxModal = document.getElementById('lightbox-modal');
+
+    // Settings Elements
+    const languageSelect = document.getElementById('response-language');
+    const subjectSelect = document.getElementById('subject');
+    const wordsLimitSlider = document.getElementById('words-limit');
+    const wordsLimitValue = document.getElementById('words-limit-value');
+
+    // Camera, Cropper, Lightbox Elements
+    const video = document.getElementById('camera-stream');
+    const canvas = document.getElementById('camera-canvas');
+    const captureBtn = document.getElementById('capture-btn');
+    const imageToCrop = document.getElementById('image-to-crop');
+    const cropConfirmBtn = document.getElementById('crop-confirm-btn');
+    let stream, cropper;
+
+    // --- State ---
+    let messages = [];
+    let attachedImages = [];
+    let isChatActive = false;
+    let isSearchEnabled = false;
+    let userSettings = { language: 'English', subject: 'General', words_limit: 100 };
+    
+    // --- Utility Functions ---
+    const toBase64 = file => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = error => reject(error);
+    });
+    
+    const openModal = (modal) => modal.classList.add('show');
+    const closeModal = (modal) => modal.classList.remove('show');
+
+    // Auto-resize textarea function for mobile
+    function autoResizeTextarea() {
+        const textarea = messageInput;
+        const isMobile = window.innerWidth <= 768;
+        
+        if (isMobile) {
+            // Reset height to auto to get the correct scrollHeight
+            textarea.style.height = 'auto';
+            
+            // Calculate the new height based on content
+            const scrollHeight = textarea.scrollHeight;
+            const maxHeight = 100; // Max height in pixels for mobile
+            const minHeight = 20; // Min height in pixels
+            
+            // Set height within bounds
+            const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+            textarea.style.height = newHeight + 'px';
+            
+            // Show scrollbar only if content exceeds max height
+            textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+        }
+    }
+
+    function activateChatView() {
+        if (!isChatActive) {
+            homePage.classList.add('hidden');
+            chatContainer.classList.remove('hidden');
+            isChatActive = true;
+        }
+    }
+
+    function appendMessage(role, content, isThinking = false) {
+        activateChatView();
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('message', `${role}-message`);
+        const contentDiv = document.createElement('div');
+        contentDiv.classList.add('content');
+
+        if (isThinking) {
+            contentDiv.innerHTML = `<div class="thinking-bubble"><div class="thinking-dot"></div><div class="thinking-dot"></div><div class="thinking-dot"></div></div>`;
+        } else if (typeof content === 'string') {
+            contentDiv.innerHTML = marked.parse(content);
+        } else {
+            let htmlContent = '';
+            content.forEach(part => {
+                if (part.type === 'text') htmlContent += `<p>${part.text}</p>`;
+                else if (part.type === 'image_url') htmlContent += `<img src="${part.image_url.url}" alt="user image" class="inline-image">`;
+            });
+            contentDiv.innerHTML = htmlContent;
+        }
+        messageDiv.appendChild(contentDiv);
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        return messageDiv;
+    }
+
+    // --- Event Listeners ---
+    sendBtn.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
+    
+    // Auto-resize textarea on mobile
+    messageInput.addEventListener('input', autoResizeTextarea);
+    
+    // Handle window resize for mobile orientation changes
+    window.addEventListener('resize', () => {
+        autoResizeTextarea();
+    });
+    
+    uploadBtn.addEventListener('click', () => imageUpload.click());
+    imageUpload.addEventListener('change', async (e) => { if (e.target.files[0]) addPreviewImage(await toBase64(e.target.files[0])); imageUpload.value = ''; });
+    cameraBtn.addEventListener('click', startCamera);
+    settingsBtn.addEventListener('click', () => openModal(settingsModal));
+    searchToggleBtn.addEventListener('click', () => { isSearchEnabled = !isSearchEnabled; searchToggleBtn.classList.toggle('active', isSearchEnabled); });
+    
+    // Words limit slider event listener
+    wordsLimitSlider.addEventListener('input', () => {
+        wordsLimitValue.textContent = wordsLimitSlider.value;
+    });
+
+    mobileMenuBtn.addEventListener('click', (e) => { e.stopPropagation(); desktopIconsContainer.classList.toggle('mobile-active'); });
+    document.body.addEventListener('click', () => desktopIconsContainer.classList.remove('mobile-active'));
+
+    document.querySelectorAll('.modal-overlay .close-btn, #save-settings-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const modal = btn.closest('.modal-overlay');
+            if (modal) {
+                if (modal === cameraModal) stopCamera();
+                if (modal === cropperModal && cropper) cropper.destroy();
+                if (btn.id === 'save-settings-btn') { 
+                    userSettings.language = languageSelect.value; 
+                    userSettings.subject = subjectSelect.value; 
+                    userSettings.words_limit = parseInt(wordsLimitSlider.value);
+                }
+                closeModal(modal);
+            }
+        });
+    });
+
+    // --- Core Logic (Camera, Cropper, Send) ---
+    async function startCamera() {
+        openModal(cameraModal);
+        try {
+            stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
+            video.srcObject = stream;
+        } catch (err) { closeModal(cameraModal); alert("Could not access camera."); }
+    }
+    function stopCamera() { if (stream) { stream.getTracks().forEach(track => track.stop()); stream = null; } }
+
+    captureBtn.addEventListener('click', () => {
+        if (!video.srcObject || video.videoWidth === 0) return;
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+        stopCamera();
+        closeModal(cameraModal);
+
+        imageToCrop.src = canvas.toDataURL('image/jpeg');
+        openModal(cropperModal);
+
+        if (cropper) cropper.destroy();
+        imageToCrop.onload = () => {
+            cropper = new Cropper(imageToCrop, { aspectRatio: 0, viewMode: 1, background: false });
+        };
+    });
+    
+    cropConfirmBtn.addEventListener('click', () => {
+        if (!cropper || typeof cropper.getCroppedCanvas !== 'function') return;
+        const croppedCanvas = cropper.getCroppedCanvas();
+        if (croppedCanvas) addPreviewImage(croppedCanvas.toDataURL('image/jpeg'));
+        cropper.destroy();
+        cropper = null;
+        closeModal(cropperModal);
+    });
+
+    function addPreviewImage(base64) {
+        attachedImages.push(base64);
+        const preview = document.createElement('div');
+        preview.className = 'image-preview';
+        preview.innerHTML = `<img src="${base64}" alt="preview"><button class="remove-image-btn">&times;</button>`;
+        preview.querySelector('.remove-image-btn').addEventListener('click', () => {
+            attachedImages.splice(attachedImages.indexOf(base64), 1);
+            preview.remove();
+        });
+        imagePreviewContainer.appendChild(preview);
+    }
+
+    async function sendMessage() {
+        const text = messageInput.value.trim();
+        if (text.length === 0 && attachedImages.length === 0) return;
+        
+        let userContent = [];
+        if (text) userContent.push({ type: 'text', text: text });
+        attachedImages.forEach(imgBase64 => userContent.push({ type: 'image_url', image_url: { url: imgBase64 } }));
+
+        messages.push({ role: 'user', content: userContent });
+        appendMessage('user', userContent);
+        
+        messageInput.value = '';
+        messageInput.style.height = 'auto'; // Reset height
+        imagePreviewContainer.innerHTML = '';
+        attachedImages = [];
+
+        const assistantMsgDiv = appendMessage('assistant', '', true);
+        const assistantContentDiv = assistantMsgDiv.querySelector('.content');
+
+        // Send settings as a separate object in the request body
+        const requestBody = {
+            messages: messages,
+            prompt_settings: userSettings,
+            command: isSearchEnabled ? "search" : null
+        };
+        
+        try {
+            const response = await fetch('/api/chat/stream', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) });
+            if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+            
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let fullResponse = '';
+            let isFirstChunk = true;
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                
+                const lines = decoder.decode(value, { stream: true }).split('\n\n');
+
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        try {
+                            const data = JSON.parse(line.substring(6));
+                            if (data.error) throw new Error(data.error);
+                            if (data.finished) continue;
+                            if (data.content) {
+                                if (isFirstChunk) { assistantContentDiv.innerHTML = ''; isFirstChunk = false; }
+                                fullResponse += data.content;
+                                assistantContentDiv.innerHTML = marked.parse(fullResponse + ' ▌');
+                            }
+                        } catch (e) { /* Ignore */ }
+                    }
+                }
+            }
+            assistantContentDiv.innerHTML = marked.parse(fullResponse);
+            messages.push({ role: 'assistant', content: fullResponse });
+
+        } catch (error) {
+            assistantContentDiv.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
+        }
+    }
+});

static/style.css

@@ -0,0 +1,222 @@
+:root {
+  --primary-color: #007bff;
+  --background-color: #f9fafb;
+  --text-color: #333;
+  --border-color: #e0e0e0;
+  --user-msg-bg: #007bff;
+  --user-msg-text: #ffffff;
+  --assistant-msg-bg: #ffffff;
+  --assistant-msg-text: #333;
+  --input-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+* { box-sizing: border-box; }
+
+html, body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden; /* Prevents body scrollbar */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: 
+    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 60%, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 60% 40%, rgba(251, 146, 60, 0.07) 0%, transparent 50%),
+    radial-gradient(ellipse at 10% 50%, rgba(236, 72, 153, 0.06) 0%, transparent 60%),
+    radial-gradient(ellipse at 90% 30%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
+    radial-gradient(circle at 50% 10%, rgba(99, 102, 241, 0.05) 0%, transparent 70%),
+    radial-gradient(circle at 30% 90%, rgba(245, 158, 11, 0.06) 0%, transparent 70%),
+    #f9fafb;
+  background-attachment: fixed;
+}
+
+#app-wrapper {
+  width: 100%;
+  max-width: 1000px;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Home Page */
+#home-page {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+}
+.home-content .logo { font-size: 5rem; color: var(--primary-color); margin-bottom: 20px; }
+.home-content h1 { font-size: 2.5rem; margin-bottom: 15px; }
+.home-content p { font-size: 1.1rem; color: #666; max-width: 600px; margin: 0 auto 30px auto; }
+.start-prompt { margin-top: 40px; padding: 15px 25px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; display: inline-block; }
+.start-prompt p { font-size: 1rem; color: #333; margin: 0; }
+
+/* Chat Interface */
+#chat-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* Important for containing the scroll */
+}
+.hidden { display: none !important; }
+
+#chat-messages {
+  flex-grow: 1;
+  padding: 20px;
+  overflow-y: auto; /* This is the ONLY scrolling element */
+  display: flex;
+  flex-direction: column;
+}
+.message { max-width: 80%; margin-bottom: 15px; padding: 10px 16px; border-radius: 18px; line-height: 1.5; word-wrap: break-word; }
+.message .content p { margin: 0 0 5px 0; }
+.message .content p:last-child { margin-bottom: 0; }
+.message .content img.inline-image { max-width: 250px; border-radius: 12px; margin-top: 8px; cursor: pointer; }
+.user-message { background-color: var(--user-msg-bg); color: var(--user-msg-text); align-self: flex-end; border-bottom-right-radius: 5px; }
+.assistant-message { background-color: var(--assistant-msg-bg); color: var(--assistant-msg-text); align-self: flex-start; border: 1px solid var(--border-color); border-bottom-left-radius: 5px; }
+
+/* Thinking Animation */
+.thinking-bubble { display: flex; align-items: center; gap: 5px; }
+.thinking-dot { width: 8px; height: 8px; background-color: #999; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
+.thinking-dot:nth-child(1) { animation-delay: -0.32s; }
+.thinking-dot:nth-child(2) { animation-delay: -0.16s; }
+@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
+
+/* Input Area */
+#input-area { padding: 15px 20px 25px 20px; flex-shrink: 0; }
+#image-preview-container { display: flex; gap: 10px; margin-bottom: 10px; }
+.image-preview { position: relative; }
+.image-preview img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
+.remove-image-btn { position: absolute; top: -8px; right: -8px; background: #333; color: white; border: 2px solid white; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 18px; text-align: center; }
+.input-bar { display: flex; align-items: center; background-color: #ffffff; border-radius: 28px; padding: 8px; box-shadow: var(--input-shadow); border: 1px solid var(--border-color); position: relative; }
+#message-input { 
+  flex-grow: 1; 
+  border: none; 
+  background: transparent; 
+  padding: 10px 15px; 
+  font-size: 16px; 
+  resize: none; 
+  max-height: 120px; 
+  outline: none; 
+  overflow: hidden;
+  min-height: 20px;
+  line-height: 1.4;
+}
+.icon-btn { background: none; border: none; font-size: 18px; color: #555; cursor: pointer; padding: 10px; border-radius: 50%; transition: all 0.2s; flex-shrink: 0; }
+.icon-btn:hover { background-color: #f0f4f8; }
+.icon-btn.active { color: var(--primary-color); background-color: #e6f2ff; }
+
+/* Send Button - Design Restored */
+#send-btn {
+  background-color: var(--primary-color);
+  color: white;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 12px; /* Changed from 50% */
+  margin-left: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+}
+#send-btn:disabled { background-color: #a0c7ff; cursor: not-allowed; }
+
+/* Responsive Input Bar */
+.mobile-only { display: none; }
+.desktop-icons { display: flex; align-items: center; }
+
+/* Modals (Shared Styles) */
+.modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
+.modal-overlay.show { display: flex; opacity: 1; }
+.modal-content { background-color: #fff; padding: 0; border: 1px solid var(--border-color); width: 90%; max-width: 500px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: scale(0.95); transition: transform 0.3s ease; }
+.modal-overlay.show .modal-content { transform: scale(1); }
+.modal-content.wide { max-width: 800px; }
+.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border-color); }
+.modal-header h2 { margin: 0; font-size: 18px; }
+.modal-body { padding: 20px; }
+.modal-footer { padding: 15px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; }
+.modal-button { background-color: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 16px; }
+.close-btn { background: none; border: none; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; padding: 0 5px; }
+.setting { margin-bottom: 20px; }
+.setting label { display: block; margin-bottom: 8px; font-weight: 500; }
+.custom-select { position: relative; width: 100%; }
+.custom-select select { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; appearance: none; background-color: white; font-size: 16px; }
+.custom-select::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); pointer-events: none; }
+
+/* Slider Styles */
+.slider {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #ddd;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: 10px;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.slider::-webkit-slider-track {
+  background: #ddd;
+  height: 6px;
+  border-radius: 3px;
+}
+
+.slider::-moz-range-track {
+  background: #ddd;
+  height: 6px;
+  border-radius: 3px;
+  border: none;
+}
+#camera-stream { width: 100%; height: auto; border-radius: 8px; }
+.cropper-container { height: 400px; }
+#image-to-crop { display: block; max-width: 100%; }
+.lightbox { background-color: rgba(0, 0, 0, 0.85); }
+.lightbox .close-btn { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; }
+.lightbox-content { margin: auto; display: block; max-width: 80%; max-height: 80%; }
+
+/* Media Query for Responsiveness */
+@media (max-width: 768px) {
+  .home-content h1 { font-size: 1.8rem; }
+  .home-content p { font-size: 1rem; }
+  .message { max-width: 90%; }
+  .desktop-icons { display: none; }
+  .mobile-only { display: block; }
+  #mobile-menu-btn { position: absolute; bottom: calc(100% + 10px); left: 0; background-color: white; box-shadow: var(--input-shadow); }
+  .desktop-icons.mobile-active { display: flex; position: absolute; bottom: calc(100% + 10px); left: 50px; background: white; padding: 5px; border-radius: 20px; box-shadow: var(--input-shadow); }
+  
+  /* Mobile input bar auto-resize */
+  .input-bar {
+    align-items: flex-end;
+    min-height: 56px;
+  }
+  
+  #message-input {
+    max-height: 100px;
+    overflow-y: auto;
+    resize: none;
+    height: auto;
+  }
+}

static/styles.css

@@ -1,66 +0,0 @@
-:root {
-  --bg: #0b1220;
-  --panel: #121a2b;
-  --muted: #93a1ba;
-  --text: #e6ebf5;
-  --acc: #5b8cff;
-  --acc-2: #21d4a3;
-  --danger: #ff6b6b;
-  --border: #223154;
-}
-
-* { box-sizing: border-box; }
-html, body { height: 100%; }
-body {
-  margin: 0;
-  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
-  color: var(--text);
-  background: radial-gradient(1200px 800px at 80% -10%, #1a2a4a55, transparent 70%),
-             radial-gradient(1200px 800px at -10% 120%, #163a3a55, transparent 70%),
-             var(--bg);
-}
-
-.app { max-width: 920px; margin: 0 auto; padding: 16px; height: 100%; display: flex; flex-direction: column; }
-.app-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid var(--border); background: linear-gradient(180deg, #17233b 0%, #101827 100%); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.25) }
-.brand { font-weight: 700; letter-spacing: 0.2px; }
-.status { color: var(--muted); font-size: 13px; }
-
-.chat-container { flex: 1; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
-.messages { flex: 1; overflow-y: auto; padding: 12px; border: 1px solid var(--border); background: #0e1627aa; border-radius: 14px; scroll-behavior: smooth; }
-
-.message { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 8px; border-bottom: 1px dashed #23324f; }
-.message:last-child { border-bottom: none; }
-.avatar { width: 36px; height: 36px; border-radius: 10px; align-self: start; background: #152341; display:flex; align-items:center; justify-content:center; color:#9db4ff; font-weight:700; }
-.role-user .avatar{ background:#182b4d; color:#bfe1ff }
-.role-assistant .avatar{ background:#193b2f; color:#7ff0c4 }
-.bubble { padding: 10px 12px; border-radius: 12px; background: #13203b; border: 1px solid #23324f; }
-.role-user .bubble { background: #162343; }
-.role-assistant .bubble { background: #132f2a; border-color: #1f4b40; }
-
-.chat-input { display: grid; grid-template-columns: 140px 1fr auto; gap: 10px; padding: 12px; border: 1px solid var(--border); background: #0e1627aa; border-radius: 14px; align-items: end; }
-.command-select { height: 40px; border-radius: 10px; border: 1px solid var(--border); background: #101a30; color: var(--text); padding: 0 10px; }
-textarea { width: 100%; resize: none; max-height: 120px; min-height: 40px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #101a30; color: var(--text); outline: none; }
-.send-btn { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid #3a57a8; background: linear-gradient(180deg, #496eea 0%, #3754bd 100%); color: white; font-weight: 600; }
-.send-btn:disabled{ opacity: .7; cursor: not-allowed; }
-
-.assistant-streaming { background: repeating-linear-gradient(90deg, #132f2a, #132f2a 10px, #13392f 10px, #13392f 20px); animation: barber 1.2s linear infinite; }
-@keyframes barber { from { background-position: 0 0; } to { background-position: 40px 0; } }
-
-.error { color: var(--danger); }
-
-/* Input area */
-.input-area { display: flex; flex-direction: column; gap: 8px; }
-.actions { display: flex; align-items: center; gap: 8px; }
-.icon-btn { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: #0f1a33; color: var(--text); }
-
-/* Image previews */
-.image-previews { display: flex; flex-wrap: wrap; gap: 8px; }
-.image-preview { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #111a30; }
-.image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.image-preview .remove { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 6px; font-size: 12px; padding: 2px 4px; cursor: pointer; }
-
-/* Images inside bubbles */
-.bubble-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
-.bubble-images img { max-width: 180px; max-height: 180px; border-radius: 8px; border: 1px solid #23324f; }
-
-