Update app.py

app.py

@@ -1,31 +1,75 @@
 import gradio as gr
 import openai
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+# --- Custom Theme Definition ---
+
+class NordTheme(Base):
+    """
+    A custom Gradio theme inspired by the Nord color palette.
+    """
+    def __init__(self):
+        super().__init__(
+            primary_hue=colors.blue,
+            secondary_hue=colors.sky,
+            neutral_hue=colors.slate,
+            font=(fonts.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"),
+            font_mono=(fonts.GoogleFont("Fira Code"), "ui-monospace", "monospace"),
+        )
+        self.set(
+            # Color Palette
+            body_background_fill="#2E3440",
+            body_text_color="#ECEFF4",
+            block_background_fill="#3B4252",
+            block_border_width="1px",
+            block_border_color="#4C566A",
+            block_label_background_fill="#434C5E",
+            block_label_text_color="#ECEFF4",
+            
+            input_background_fill="#434C5E",
+            input_border_color="transparent",
+            input_text_color="#ECEFF4",
+            
+            # Button Styles
+            button_primary_background_fill="#5E81AC",
+            button_primary_background_fill_hover="#81A1C1",
+            button_primary_text_color="#ECEFF4",
+            button_secondary_background_fill="#4C566A",
+            button_secondary_background_fill_hover="#5a657a",
+            button_secondary_text_color="#ECEFF4",
+            
+            # Other Elements
+            border_color_accent="#5E81AC",
+            background_fill_primary_dark="#2E3440",
+            color_accent_soft="#4c566a",
+            
+            # Sizing
+            radius_sm=sizes.radius_sm,
+            radius_md=sizes.radius_md,
+            radius_lg=sizes.radius_lg,
+            block_radius="12px",
+            button_radius="8px",
+        )
 
 # --- UI Configuration ---
 
-# Extracted from the provided React code
 LANGUAGES = [
     'Python', 'JavaScript', 'TypeScript', 'Java', 'C++', 'C#', 'C', 'Go', 
     'Rust', 'Swift', 'Kotlin', 'PHP', 'Ruby', 'Scala', 'R', 'MATLAB', 
-    'Perl', 'Haskell', 'Lua', 'Dart', 'Elixir', 'F#', 'Clojure', 
-    'Objective-C', 'Visual Basic', 'Bash', 'PowerShell', 'SQL', 'HTML', 
-    'CSS', 'JSON', 'XML', 'YAML', 'Assembly', 'Fortran', 'COBOL', 
-    'Pascal', 'Delphi', 'Groovy', 'Julia', 'Nim', 'Crystal', 'Zig', 
-    'V', 'OCaml', 'Erlang', 'Prolog', 'Lisp', 'Scheme', 'Racket'
+    'Perl', 'Haskell', 'Lua', 'Dart', 'Elixir', 'F#', 'Clojure', 'SQL'
 ]
 
-# A selection of popular and capable models available via OpenRouter
-# You can expand this list with other models from openrouter.ai
-MODELS = [
-    "anthropic/claude-3.5-sonnet",
-    "google/gemini-flash-1.5",
-    "meta-llama/llama-3-8b-instruct",
-    "mistralai/mistral-large",
-    "openai/gpt-4o",
-    "microsoft/wizardlm-2-8x22b",
-]
+MODELS = sorted([
+    "agentica-org/deepcoder-14b-preview:free", "deepseek/deepseek-chat-v3:free",
+    "deepseek/deepseek-r1-0528:free", "google/gemma-3-27b-it:free",
+    "google/gemini-2.0-flash-exp:free", "meta-llama/llama-3.3-70b-instruct:free",
+    "mistralai/devstral-small-2505:free", "mistralai/mistral-small-3.2-24b-instruct-2506:free",
+    "moonshotai/kimi-dev-72b:free", "openrouter/cypher-alpha:free",
+    "qwen/qwen-2.5-coder-32b-instruct:free", "qwen/qwen3-235b-a22b-04-28:free",
+    "qwen/qwq-32b:free",
+])
 
-# Default example code from the original application
 DEFAULT_SOURCE_CODE = """# Example Python code
 def fibonacci(n):
     if n <= 1:
@@ -37,29 +81,16 @@ print(fibonacci(10))"""
 # --- Core Conversion Logic ---
 
 def convert_code(
-    source_code: str,
-    source_lang: str,
-    target_lang: str,
-    model: str,
-    api_key: str,
+    source_code: str, source_lang: str, target_lang: str, model: str, api_key: str
 ):
-    """
-    Uses an LLM via OpenRouter to convert code from one language to another.
-    """
     if not source_code.strip():
         raise gr.Error("Please enter some code to convert.")
     if not api_key.strip():
         raise gr.Error("OpenRouter API key is required.")
-    if not model:
-        raise gr.Error("Please select a model for the conversion.")
+    if not model or not model.strip():
+        raise gr.Error("Please select or enter a model for the conversion.")
 
-    # Initialize the OpenAI client to point to OpenRouter's API
-    client = openai.OpenAI(
-        base_url="https://openrouter.ai/api/v1",
-        api_key=api_key,
-    )
-
-    # Construct the prompt for the LLM
+    client = openai.OpenAI(base_url="https://openrouter.ai/api/v1", api_key=api_key)
     prompt = (
         f"You are an expert programmer. Convert the following {source_lang} code "
         f"to {target_lang}. Your response should only contain the raw, converted code. "
@@ -68,124 +99,75 @@ def convert_code(
         f"{source_code}\n"
         f"--- End of {source_lang} Code ---"
     )
-
     try:
-        # Make the API call to the selected model
         completion = client.chat.completions.create(
             model=model,
-            messages=[
-                {"role": "user", "content": prompt},
-            ],
-            temperature=0.1, # Lower temperature for more deterministic output
-            max_tokens=2048,
+            messages=[{"role": "user", "content": prompt}],
+            temperature=0.1, max_tokens=2048
         )
-        converted_code = completion.choices[0].message.content.strip()
-        return converted_code
-
+        return completion.choices[0].message.content.strip()
     except openai.AuthenticationError:
-        raise gr.Error("Authentication failed. Please check your OpenRouter API key.")
+        raise gr.Error("Authentication failed. Check your OpenRouter API key.")
     except Exception as e:
-        # A catch-all for other potential API or network errors
-        raise gr.Error(f"An error occurred during conversion: {e}")
+        raise gr.Error(f"An error occurred: {e}")
 
 # --- Gradio User Interface ---
 
-with gr.Blocks(
-    theme=gr.themes.Monochrome(),
-    css=".gradio-container {background-color: #0f172a}" # Dark theme like the original
-) as app:
+with gr.Blocks(theme=NordTheme()) as app:
     # Header
-    with gr.Row():
-        gr.HTML(
-            """
-            <div style="display: flex; align-items: center; gap: 12px; padding: 10px;">
-                <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
-                <div>
-                    <h1 style="font-size: 1.5rem; font-weight: 700; color: #ffffff; margin: 0;">CodeVerter</h1>
-                    <p style="font-size: 0.875rem; color: #9ca3af; margin: 0;">Programming Language Converter via OpenRouter</p>
-                </div>
+    gr.HTML(
+        """
+        <div style="display: flex; align-items: center; gap: 12px; padding: 10px;">
+            <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#81A1C1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+            <div>
+                <h1 style="font-size: 1.5rem; font-weight: 700; color: #ECEFF4; margin: 0;">CodeVerter</h1>
+                <p style="font-size: 0.875rem; color: #D8DEE9; margin: 0;">Programming Language Converter via OpenRouter</p>
             </div>
-            """
-        )
+        </div>
+        """
+    )
 
-    # API Key and Model Selection
+    # Configuration Accordion
     with gr.Accordion("⚙️ Configuration", open=True):
         openrouter_key = gr.Textbox(
             label="OpenRouter API Key",
-            placeholder="Enter your OpenRouter API key here...",
+            placeholder="Enter your OpenRouter API key...",
             type="password",
-            elem_id="api-key-textbox",
         )
         model_selection = gr.Dropdown(
-            label="Select LLM Model",
+            label="Select or Enter a Model Name",
             choices=MODELS,
-            value=MODELS[0], # Default to the first model in the list
+            value=MODELS[0] if MODELS else None,
+            allow_custom_value=True,
         )
 
     # Main conversion interface
     with gr.Row(equal_height=False):
-        # Input column
         with gr.Column(scale=1):
-            source_lang_selection = gr.Dropdown(
-                label="Source Language",
-                choices=LANGUAGES,
-                value="Python",
-            )
-            source_code_input = gr.Code(
-                label="Source Code",
-                language="python", # Start with python syntax highlighting
-                value=DEFAULT_SOURCE_CODE,
-                lines=15,
-            )
-
-        # Output column
+            source_lang_selection = gr.Dropdown(label="Source Language", choices=LANGUAGES, value="Python")
+            source_code_input = gr.Code(label="Source Code", language="python", value=DEFAULT_SOURCE_CODE, lines=15)
         with gr.Column(scale=1):
-            target_lang_selection = gr.Dropdown(
-                label="Target Language",
-                choices=LANGUAGES,
-                value="JavaScript",
-            )
-            target_code_output = gr.Code(
-                label="Converted Code",
-                language="javascript", # Start with javascript syntax highlighting
-                lines=15,
-                interactive=False, # Make it read-only
-            )
+            target_lang_selection = gr.Dropdown(label="Target Language", choices=LANGUAGES, value="JavaScript")
+            target_code_output = gr.Code(label="Converted Code", language="javascript", lines=15, interactive=False)
     
-    # Keep language highlighting in sync with dropdowns
-    source_lang_selection.change(
-        lambda x: gr.update(language=x.lower()),
-        inputs=source_lang_selection,
-        outputs=source_code_input
-    )
-    target_lang_selection.change(
-        lambda x: gr.update(language=x.lower()),
-        inputs=target_lang_selection,
-        outputs=target_code_output
-    )
+    # Sync language highlighting with dropdowns
+    source_lang_selection.change(lambda x: gr.update(language=x.lower()), inputs=source_lang_selection, outputs=source_code_input)
+    target_lang_selection.change(lambda x: gr.update(language=x.lower()), inputs=target_lang_selection, outputs=target_code_output)
 
     # Convert button and action
-    convert_button = gr.Button("Convert Code", variant="primary")
+    convert_button = gr.Button("Convert Code", variant="primary", scale=1)
     convert_button.click(
         fn=convert_code,
-        inputs=[
-            source_code_input,
-            source_lang_selection,
-            target_lang_selection,
-            model_selection,
-            openrouter_key,
-        ],
+        inputs=[source_code_input, source_lang_selection, target_lang_selection, model_selection, openrouter_key],
         outputs=target_code_output,
         api_name="convert"
     )
 
     # Footer
     gr.HTML(
-        """
-        <div style="text-align: center; margin-top: 24px; color: #9ca3af; font-size: 0.875rem;">
-            <p>CodeVerter uses LLMs via OpenRouter to convert code. Results may require manual review.</p>
-        </div>
-        """
+        """<div style="text-align: center; margin-top: 24px; color: #a0aec0; font-size: 0.875rem;">
+        <p>CodeVerter uses LLMs via OpenRouter. Results may require manual review.</p>
+        </div>"""
     )
 
 if __name__ == "__main__":