Custom Models from openrouter

airflow-wingman/src/airflow_wingman/llms_models.py

@@ -1,4 +1,17 @@
 MODELS = {
+        "openai": {
+            "name": "OpenAI",
+            "endpoint": "https://api.openai.com/v1/chat/completions",
+            "models": [
+                {
+                    "id": "gpt-4o",
+                    "name": "GPT-4o",
+                    "default": True,
+                    "context_window": 128000,
+                    "description": "Input $5/M tokens, Output $15/M tokens",
+                }
+            ],
+        },
         "anthropic": {
             "name": "Anthropic",
             "endpoint": "https://api.anthropic.com/v1/messages",
@@ -24,18 +37,11 @@ MODELS = {
             "endpoint": "https://openrouter.ai/api/v1/chat/completions",
             "models": [
                 {
-                    "id": "anthropic/claude-3.5-sonnet",
+                    "id": "custom",
-                    "name": "Claude 3.5 Sonnet",
+                    "name": "Custom Model",
                     "default": False,
-                    "context_window": 200000,
+                    "context_window": 128000,  # Default context window, will be updated based on model
-                    "description": "Input $3/M tokens, Output $15/M tokens",
+                    "description": "Enter any model name supported by OpenRouter (e.g., 'anthropic/claude-3-opus', 'meta-llama/llama-2-70b')",
-                },
-                {
-                    "id": "anthropic/claude-3.5-haiku",
-                    "name": "Claude 3.5 Haiku",
-                    "default": False,
-                    "context_window": 200000,
-                    "description": "Input $0.80/M tokens, Output $4/M tokens",
                 },
             ],
         },

airflow-wingman/src/airflow_wingman/templates/wingman_chat.html

@@ -21,7 +21,7 @@
         <div class="col-md-3">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <h3 class="panel-title">Model Selection</h3>
+                    <h3 class="panel-title">Provider Selection</h3>
                 </div>
                 <div class="panel-body">
                     {% for provider_id, provider in models.items() %}
@@ -29,13 +29,15 @@
                         <h4 class="provider-name">{{ provider.name }}</h4>
                         {% for model in provider.models %}
                         <div class="radio model-option">
-                            <label class="model-label" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ model.description }}">
+                            <label class="model-label" title="{{ model.description }}">
                                 <input type="radio"
                                        name="model"
                                        value="{{ provider_id }}:{{ model.id }}"
                                        {% if model.default %}checked{% endif %}
                                        data-endpoint="{{ provider.endpoint }}"
-                                       data-context-window="{{ model.context_window }}">
+                                       data-context-window="{{ model.context_window }}"
+                                       data-provider="{{ provider_id }}"
+                                       data-model-name="{{ model.name }}">
                                 {{ model.name }}
                             </label>
                         </div>
@@ -44,6 +46,14 @@
                     {% endfor %}
                 </div>
 
+                <!-- Model Name Input -->
+                <div class="panel-body" style="border-top: 1px solid #ddd; padding-top: 15px;">
+                    <div class="form-group">
+                        <label for="modelName">Model Name</label>
+                        <input type="text" class="form-control" id="modelName" placeholder="Enter model name for OpenRouter" disabled>
+                    </div>
+                </div>
+
                 <style>
                 .provider-section {
                     margin-bottom: 20px;
@@ -155,15 +165,55 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize tooltips
+    // Add title attributes for tooltips
-    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
-    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        el.title = el.getAttribute('title') || el.getAttribute('data-bs-original-title');
-        return new bootstrap.Tooltip(tooltipTriggerEl, {
+    });
-            trigger: 'hover',
+
-            html: true
+    // Handle model selection and model name input
+    const modelNameInput = document.getElementById('modelName');
+    const modelRadios = document.querySelectorAll('input[name="model"]');
+
+    modelRadios.forEach(function(radio) {
+        radio.addEventListener('change', function() {
+            const provider = this.value.split(':')[0];  // Get provider from value instead of data attribute
+            const modelName = this.getAttribute('data-model-name');
+            console.log('Selected provider:', provider);
+            console.log('Model name:', modelName);
+            
+            if (provider === 'openrouter') {
+                console.log('Enabling model name input');
+                modelNameInput.disabled = false;
+                modelNameInput.value = '';
+                modelNameInput.placeholder = 'Enter model name for OpenRouter';
+            } else {
+                console.log('Disabling model name input');
+                modelNameInput.disabled = true;
+                modelNameInput.value = modelName;
+            }
         });
     });
 
+    // Set initial state based on default selection
+    const defaultSelected = document.querySelector('input[name="model"]:checked');
+    if (defaultSelected) {
+        const provider = defaultSelected.value.split(':')[0];  // Get provider from value instead of data attribute
+        const modelName = defaultSelected.getAttribute('data-model-name');
+        console.log('Initial provider:', provider);
+        console.log('Initial model name:', modelName);
+        
+        if (provider === 'openrouter') {
+            console.log('Initially enabling model name input');
+            modelNameInput.disabled = false;
+            modelNameInput.value = '';
+            modelNameInput.placeholder = 'Enter model name for OpenRouter';
+        } else {
+            console.log('Initially disabling model name input');
+            modelNameInput.disabled = true;
+            modelNameInput.value = modelName;
+        }
+    }
+
     const messageInput = document.getElementById('message-input');
     const sendButton = document.getElementById('send-button');
     const chatMessages = document.getElementById('chat-messages');