Update app.py

app.py

@@ -2,8 +2,9 @@ import gradio as gr
 import os
 from openai import OpenAI
 import time
+import json
 
-def solve_competitive_problem(problem_statement, language_choice, api_key, progress=gr.Progress()):
+def solve_competitive_problem(problem_statement, language_choice, api_key, remember_api_key, progress=gr.Progress()):
     """
     Generate a solution for a competitive programming problem
     
@@ -11,6 +12,7 @@ def solve_competitive_problem(problem_statement, language_choice, api_key, progr
         problem_statement (str): The problem statement
         language_choice (str): Programming language for the solution
         api_key (str): OpenRouter API key
+        remember_api_key (bool): Whether to remember the API key
         progress: Gradio progress tracker
     
     Returns:
@@ -36,49 +38,41 @@ def solve_competitive_problem(problem_statement, language_choice, api_key, progr
         # Create a more detailed prompt with language preference
         prompt = f"""
 You are an expert competitive programmer. Analyze the following problem and provide a step-by-step solution with explanations and code in {language_choice}.
-
 Problem:
 {problem_statement}
-
 Your response should include:
-
 1. Problem Analysis:
    - Clear restatement of the problem in your own words
    - Identification of input/output formats
    - Key constraints and edge cases to consider
    - Time and space complexity requirements
-
 2. Approach:
    - High-level strategy to solve the problem
    - Why this approach is optimal compared to alternatives
    - Any mathematical insights or observations
    - Data structures that will be helpful
-
 3. Algorithm:
    - Detailed step-by-step breakdown of the algorithm
    - Clear explanation of the logic behind each step
    - Time complexity analysis with justification
    - Space complexity analysis with justification
    - Any optimizations made to improve performance
-
 4. Implementation:
    - Clean, efficient, and well-commented {language_choice} code
    - Proper variable naming and code organization
    - Error handling and edge case management
    - Optimized for both readability and performance
-
 5. Testing:
    - Example test cases with expected outputs
    - Edge case testing scenarios
    - Explanation of how to verify correctness
    - Potential areas where the solution might need improvement
-
 Format your answer with clear headings and subheadings. Use markdown formatting for better readability.
         """
         
         progress(0.5, "Generating solution...")
         
-        # Call the model
+        # Call the model with streaming enabled
         completion = client.chat.completions.create(
             extra_headers={
                 "HTTP-Referer": "https://competitive-programming-assistant.app",
@@ -92,12 +86,17 @@ Format your answer with clear headings and subheadings. Use markdown formatting
                 }
             ],
             temperature=0.7,
-            stream=False
+            stream=True  # Enable streaming for partial results
         )
         
-        progress(0.9, "Processing response...")
-        
-        solution = completion.choices[0].message.content
+        # Process streaming response
+        solution = ""
+        for chunk in completion:
+            if chunk.choices[0].delta.content is not None:
+                solution += chunk.choices[0].delta.content
+                # Update progress and yield partial results
+                progress(0.5 + (len(solution) % 500) / 1000, "Generating solution...")
+                yield solution
         
         progress(1.0, "Complete!")
         return solution
@@ -105,27 +104,142 @@ Format your answer with clear headings and subheadings. Use markdown formatting
     except Exception as e:
         return f"Error: {str(e)}"
 
+def get_saved_api_key():
+    """
+    Return a JavaScript snippet that retrieves the saved API key from localStorage
+    """
+    return """
+    function() {
+        const savedKey = localStorage.getItem('openrouter_api_key');
+        if (savedKey) {
+            document.querySelector('#api_key_input input').value = savedKey;
+            document.querySelector('#remember_api_key input').checked = true;
+        }
+    }
+    """
+
+def save_api_key(api_key, remember):
+    """
+    Return a JavaScript snippet that saves or removes the API key from localStorage
+    """
+    return f"""
+    function() {{
+        if ({str(remember).lower()}) {{
+            localStorage.setItem('openrouter_api_key', "{api_key}");
+        }} else {{
+            localStorage.removeItem('openrouter_api_key');
+        }}
+    }}
+    """
+
+# Define theme options
+light_theme = gr.themes.Soft()
+dark_theme = gr.themes.Soft(
+    primary_hue="slate",
+    secondary_hue="slate",
+    neutral_hue="slate",
+    text_size=gr.themes.sizes.text_md,
+)
+
 # Create a Gradio interface
-with gr.Blocks(title="Competitive Programming Assistant", theme=gr.themes.Soft()) as app:
-    gr.Markdown("""
-    # 🏆 Competitive Programming Assistant
+with gr.Blocks(title="Competitive Programming Assistant", theme=light_theme, css="""
+    /* Custom CSS for better responsiveness and styling */
+    @media (max-width: 768px) {
+        .container { padding: 10px !important; }
+        .responsive-padding { padding: 8px !important; }
+    }
+    .code-block { 
+        background-color: #f7f7f7; 
+        border-radius: 4px;
+        padding: 10px;
+        font-family: monospace;
+    }
+    .dark-mode .code-block {
+        background-color: #2d2d2d;
+        color: #f1f1f1;
+    }
+    /* Custom styling for buttons */
+    .action-button {
+        margin-top: 10px !important;
+    }
+""") as app:
+    # JavaScript for theme toggling
+    app.load(js="""
+    function setupThemeToggle() {
+        const themeToggle = document.getElementById('theme-toggle-btn');
+        const savedTheme = localStorage.getItem('theme');
+        
+        if (savedTheme === 'dark') {
+            document.body.classList.add('dark-mode');
+            themeToggle.textContent = '☀️ Light Mode';
+        }
+        
+        themeToggle.addEventListener('click', function() {
+            document.body.classList.toggle('dark-mode');
+            const isDark = document.body.classList.contains('dark-mode');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            themeToggle.textContent = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';
+            
+            // Update code block styling
+            document.querySelectorAll('pre code').forEach(block => {
+                if (isDark) {
+                    block.style.backgroundColor = '#2d2d2d';
+                    block.style.color = '#f1f1f1';
+                } else {
+                    block.style.backgroundColor = '#f7f7f7';
+                    block.style.color = '#333';
+                }
+            });
+        });
+    }
     
-    Upload a problem statement from Codeforces, LeetCode, or any competitive programming platform to get:
-    - Step-by-step analysis
-    - Optimal solution approach
-    - Complete code implementation
-    - Time and space complexity analysis
+    // Initialize syntax highlighting
+    function setupPrism() {
+        if (typeof Prism !== 'undefined') {
+            Prism.highlightAll();
+        }
+    }
     
-    Powered by the OlympicCoder model.
+    // Apply saved API key on load
+    document.addEventListener('DOMContentLoaded', function() {
+        setupThemeToggle();
+        const savedKey = localStorage.getItem('openrouter_api_key');
+        if (savedKey) {
+            document.querySelector('#api_key_input input').value = savedKey;
+            document.querySelector('#remember_api_key input').checked = true;
+        }
+    });
     """)
     
+    # App header with theme toggle
+    with gr.Row(elem_classes="responsive-padding"):
+        gr.Markdown("""
+        # 🏆 Competitive Programming Assistant
+        
+        Upload a problem statement from Codeforces, LeetCode, or any competitive programming platform to get:
+        - Step-by-step analysis
+        - Optimal solution approach
+        - Complete code implementation
+        - Time and space complexity analysis
+        
+        Powered by the OlympicCoder model.
+        """)
+        theme_btn = gr.Button("🌙 Dark Mode", elem_id="theme-toggle-btn")
+    
     with gr.Row():
-        with gr.Column(scale=2):
-            api_key_input = gr.Textbox(
-                placeholder="Enter your OpenRouter API key here",
-                label="OpenRouter API Key",
-                type="password"
-            )
+        with gr.Column(scale=2, elem_classes="responsive-padding"):
+            with gr.Group():
+                api_key_input = gr.Textbox(
+                    placeholder="Enter your OpenRouter API key here",
+                    label="OpenRouter API Key",
+                    type="password",
+                    elem_id="api_key_input"
+                )
+                
+                remember_api_key = gr.Checkbox(
+                    label="Remember my API key",
+                    elem_id="remember_api_key"
+                )
             
             problem_input = gr.Textbox(
                 placeholder="Paste your competitive programming problem statement here...",
@@ -139,11 +253,12 @@ with gr.Blocks(title="Competitive Programming Assistant", theme=gr.themes.Soft()
                 label="Programming Language"
             )
             
-            submit_btn = gr.Button("Generate Solution", variant="primary")
+            submit_btn = gr.Button("Generate Solution", variant="primary", elem_classes="action-button")
         
-        with gr.Column(scale=3):
+        with gr.Column(scale=3, elem_classes="responsive-padding"):
             solution_output = gr.Markdown(
-                label="Generated Solution"
+                label="Generated Solution",
+                elem_id="solution-output"
             )
     
     with gr.Accordion("About", open=False):
@@ -171,12 +286,80 @@ with gr.Blocks(title="Competitive Programming Assistant", theme=gr.themes.Soft()
         5. **Testing** - Example test cases and verification methods
         """)
     
-    # Handle form submission
+    # Load saved API key on page load
+    app.load(fn=None, inputs=None, outputs=None, js=get_saved_api_key())
+    
+    # Handle API key saving when checkbox changes
+    remember_api_key.change(
+        fn=None,
+        inputs=[api_key_input, remember_api_key],
+        outputs=None,
+        js=lambda api_key, remember: save_api_key(api_key, remember)
+    )
+    
+    # Handle form submission with streaming
     submit_btn.click(
         solve_competitive_problem,
-        inputs=[problem_input, language, api_key_input],
-        outputs=solution_output
+        inputs=[problem_input, language, api_key_input, remember_api_key],
+        outputs=solution_output,
+        js="""
+        function(problem, language, api_key, remember) {
+            // Before submission, save API key if requested
+            if (remember) {
+                localStorage.setItem('openrouter_api_key', api_key);
+            }
+            
+            // Clear existing solution
+            document.getElementById('solution-output').innerHTML = 'Generating solution...';
+            
+            // Enable syntax highlighting when solution loads
+            setTimeout(function() {
+                if (typeof Prism !== 'undefined') {
+                    Prism.highlightAll();
+                }
+            }, 1000);
+        }
+        """
     )
+    
+    # Add JS for syntax highlighting
+    app.load(js="""
+    // Load Prism.js for syntax highlighting
+    const prismScript = document.createElement('script');
+    prismScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js';
+    document.head.appendChild(prismScript);
+    
+    const prismCss = document.createElement('link');
+    prismCss.rel = 'stylesheet';
+    prismCss.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css';
+    document.head.appendChild(prismCss);
+    
+    // Load additional language support
+    const languages = ['python', 'cpp', 'java', 'javascript'];
+    languages.forEach(lang => {
+        const script = document.createElement('script');
+        script.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-${lang}.min.js`;
+        document.head.appendChild(script);
+    });
+    
+    // Observe DOM changes to apply syntax highlighting to new content
+    const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+            if (mutation.addedNodes.length) {
+                setTimeout(() => {
+                    if (typeof Prism !== 'undefined') {
+                        Prism.highlightAll();
+                    }
+                }, 100);
+            }
+        });
+    });
+    
+    observer.observe(document.getElementById('solution-output'), { 
+        childList: true,
+        subtree: true
+    });
+    """)
 
 # Launch the app
 if __name__ == "__main__":