Spaces:

sheikhcoders
/

ai-model-runner

Runtime error

File size: 33,957 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Model Runner - Claude Code Integration Guide</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .tabs {
            display: flex;
            background: #f8f9fa;
            border-radius: 10px 10px 0 0;
            overflow: hidden;
        }
        
        .tab {
            flex: 1;
            padding: 15px 20px;
            background: #f8f9fa;
            border: none;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        
        .tab.active {
            background: white;
            color: #667eea;
            font-weight: bold;
        }
        
        .tab:hover {
            background: #e9ecef;
        }
        
        .tab.active:hover {
            background: white;
        }
        
        .tab-content {
            display: none;
            padding-top: 20px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
            margin: 15px 0;
        }
        
        .code-block .copy-btn {
            background: #4299e1;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            float: right;
            font-size: 12px;
        }
        
        .step {
            background: #f7fafc;
            border-left: 4px solid #667eea;
            padding: 15px;
            margin: 10px 0;
            border-radius: 0 8px 8px 0;
        }
        
        .step h4 {
            color: #667eea;
            margin-bottom: 8px;
        }
        
        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
            margin: 10px 5px;
        }
        
        .btn:hover {
            background: #5a6fd8;
        }
        
        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .btn-secondary {
            background: #718096;
        }
        
        .btn-secondary:hover {
            background: #4a5568;
        }
        
        .api-endpoint {
            background: #edf2f7;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
        }
        
        .api-endpoint .method {
            background: #48bb78;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .api-endpoint .method.get {
            background: #4299e1;
        }
        
        .api-endpoint .method.post {
            background: #48bb78;
        }
        
        .status {
            background: #d1edff;
            border: 1px solid #a8daff;
            color: #055160;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        .warning {
            background: #fef3c7;
            border: 1px solid #fde68a;
            color: #92400e;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        .success {
            background: #d1fae5;
            border: 1px solid #a7f3d0;
            color: #065f46;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .card {
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 20px;
        }
        
        .card h3 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .curl-example {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 6px;
            font-family: monospace;
            font-size: 13px;
            overflow-x: auto;
        }
        
        .setup-section {
            background: #f0fff4;
            border: 2px dashed #68d391;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .setup-section h3 {
            color: #38a169;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 AI Model Runner</h1>
            <p>Claude Code Integration Guide & API Documentation</p>
        </div>
        
        <div class="tabs">
            <button class="tab active" onclick="showTab('setup')">🚀 Setup</button>
            <button class="tab" onclick="showTab('config')">⚙️ Configuration</button>
            <button class="tab" onclick="showTab('api')">📡 API Reference</button>
            <button class="tab" onclick="showTab('examples')">💡 Examples</button>
            <button class="tab" onclick="showTab('troubleshooting')">🔧 Troubleshooting</button>
        </div>
        
        <div class="content">
            <!-- Setup Tab -->
            <div id="setup" class="tab-content active">
                <h2>🚀 Quick Setup Guide</h2>
                
                <div class="status">
                    <strong>⚠️ Important:</strong> Your Hugging Face Space may still be building. 
                    Once ready, the API will be available at: 
                    <code>https://sheikhcoders-ai-model-runner.hf.space</code>
                </div>
                
                <h3>Step 1: Locate Your Claude Code Settings</h3>
                <div class="step">
                    <h4>Find the settings file</h4>
                    <p>The Claude Code settings file is located at:</p>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyToClipboard('~/.claude/settings.json')">Copy</button>
                        ~/.claude/settings.json
                    </div>
                    <p><strong>macOS/Linux:</strong> <code>~/.claude/settings.json</code></p>
                    <p><strong>Windows:</strong> <code>%USERPROFILE%\.claude\settings.json</code></p>
                </div>
                
                <h3>Step 2: Add AI Model Runner Configuration</h3>
                <div class="step">
                    <h4>Basic Configuration</h4>
                    <p>Add the following to your settings.json file:</p>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyToClipboard('basic-config')">Copy</button>
                        <div id="basic-config">
{
  "claude": {
    "api": {
      "endpoints": {
        "ai_model_runner": {
          "url": "https://sheikhcoders-ai-model-runner.hf.space",
          "description": "AI Model Runner - Code analysis, dialogue, and reasoning",
          "capabilities": {
            "code_analysis": ["explain", "refactor", "debug", "optimize"],
            "dialogue": "microsoft/DialoGPT-medium",
            "reasoning": "step-by-step problem solving",
            "sentiment": "text sentiment analysis"
          }
        }
      }
    }
  }
}
                        </div>
                    </div>
                </div>
                
                <h3>Step 3: Test the Connection</h3>
                <div class="step">
                    <h4>Verify the API is working</h4>
                    <p>Run this command to test connectivity:</p>
                    <div class="curl-example">
curl https://sheikhcoders-ai-model-runner.hf.space/health
                    </div>
                </div>
                
                <div class="setup-section">
                    <h3>🛠️ Automated Setup Script</h3>
                    <p>Run this script to automatically configure your Claude Code integration:</p>
                    
                    <h4>Python Script</h4>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyToClipboard('python-setup')">Copy</button>
                        <div id="python-setup">
import os
import json

# Create settings directory
settings_dir = os.path.expanduser("~/.claude")
os.makedirs(settings_dir, exist_ok=True)

# Configuration
config = {
    "claude": {
        "api": {
            "endpoints": {
                "ai_model_runner": {
                    "url": "https://sheikhcoders-ai-model-runner.hf.space",
                    "description": "AI Model Runner - Code analysis, dialogue, and reasoning"
                }
            }
        }
    }
}

# Save settings
settings_file = os.path.join(settings_dir, "settings.json")
with open(settings_file, 'w') as f:
    json.dump(config, f, indent=2)

print(f"✅ Configuration saved to: {settings_file}")
                        </div>
                    </div>
                    
                    <h4>Shell Script (Bash)</h4>
                    <div class="code-block">
                        <button class="copy-btn" onclick="copyToClipboard('bash-setup')">Copy</button>
                        <div id="bash-setup">
#!/bin/bash
mkdir -p ~/.claude
cat > ~/.claude/settings.json << 'EOF'
{
  "claude": {
    "api": {
      "endpoints": {
        "ai_model_runner": {
          "url": "https://sheikhcoders-ai-model-runner.hf.space",
          "description": "AI Model Runner - Code analysis, dialogue, and reasoning"
        }
      }
    }
  }
}
EOF
echo "✅ Configuration created at ~/.claude/settings.json"
                        </div>
                    </div>
                    
                    <button class="btn" onclick="downloadSetupScripts()">📥 Download Setup Scripts</button>
                </div>
            </div>
            
            <!-- Configuration Tab -->
            <div id="config" class="tab-content">
                <h2>⚙️ Advanced Configuration</h2>
                
                <h3>Basic Endpoint Configuration</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyToClipboard('basic-endpoint')">Copy</button>
                    <div id="basic-endpoint">
{
  "claude": {
    "api": {
      "endpoints": {
        "ai_model_runner": {
          "url": "https://sheikhcoders-ai-model-runner.hf.space",
          "description": "AI Model Runner - All AI capabilities"
        }
      }
    }
  }
}
                    </div>
                </div>
                
                <h3>Code Analysis Configuration</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyToClipboard('code-config')">Copy</button>
                    <div id="code-config">
{
  "claude": {
    "api": {
      "endpoints": {
        "ai_model_runner": {
          "url": "https://sheikhcoders-ai-model-runner.hf.space",
          "description": "AI Model Runner - Code understanding",
          "capabilities": {
            "code_analysis": {
              "tasks": ["explain", "refactor", "debug", "optimize"],
              "supported_languages": ["python", "javascript", "java", "cpp", "csharp"]
            }
          }
        }
      }
    }
  }
}
                    </div>
                </div>
                
                <h3>Dialogue System Configuration</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyToClipboard('dialogue-config')">Copy</button>
                    <div id="dialogue-config">
{
  "claude": {
    "api": {
      "endpoints": {
        "ai_model_runner": {
          "url": "https://sheikhcoders-ai-model-runner.hf.space",
          "description": "AI Model Runner - Multi-turn dialogue",
          "context": {
            "model": "microsoft/DialoGPT-medium",
            "max_length": 100,
            "temperature": 0.7
          }
        }
      }
    }
  }
}
                    </div>
                </div>
                
                <h3>Complete Integration Configuration</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyToClipboard('complete-config')">Copy</button>
                    <div id="complete-config">
{
  "claude": {
    "api": {
      "endpoints": {
        "ai_model_runner": {
          "url": "https://sheikhcoders-ai-model-runner.hf.space",
          "description": "Complete AI Model Runner integration",
          "context": {
            "models": {
              "dialogue": "microsoft/DialoGPT-medium",
              "text_generation": "gpt2",
              "sentiment": "distilbert-base-uncased-finetuned-sst-2-english"
            },
            "capabilities": {
              "code_analysis": {
                "tasks": ["explain", "refactor", "debug", "optimize"],
                "languages": ["python", "javascript", "java", "cpp", "csharp"]
              },
              "dialogue": {
                "model": "microsoft/DialoGPT-medium",
                "max_length": 100,
                "temperature": 0.7
              },
              "reasoning": {
                "max_steps": 5
              }
            }
          }
        }
      }
    }
  }
}
                    </div>
                </div>
            </div>
            
            <!-- API Reference Tab -->
            <div id="api" class="tab-content">
                <h2>📡 API Reference</h2>
                
                <h3>Core Endpoints</h3>
                
                <div class="api-endpoint">
                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <span class="method get">GET</span>
                        <h4 style="margin-left: 10px; margin-bottom: 0;">/health</h4>
                    </div>
                    <p>Check API health and model status</p>
                    <p><strong>Response:</strong></p>
                    <div class="code-block">
{
  "status": "healthy",
  "models_loaded": 3
}
                    </div>
                </div>
                
                <div class="api-endpoint">
                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <span class="method get">GET</span>
                        <h4 style="margin-left: 10px; margin-bottom: 0;">/models</h4>
                    </div>
                    <p>List available AI models</p>
                </div>
                
                <div class="api-endpoint">
                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <span class="method post">POST</span>
                        <h4 style="margin-left: 10px; margin-bottom: 0;">/chat</h4>
                    </div>
                    <p>Multi-turn dialogue with AI</p>
                    <p><strong>Request Body:</strong></p>
                    <div class="code-block">
{
  "messages": [
    {"role": "user", "content": "Hello!"}
  ],
  "model": "microsoft/DialoGPT-medium",
  "max_length": 100,
  "temperature": 0.7
}
                    </div>
                </div>
                
                <div class="api-endpoint">
                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <span class="method post">POST</span>
                        <h4 style="margin-left: 10px; margin-bottom: 0;">/code</h4>
                    </div>
                    <p>Analyze code (explain, refactor, debug, optimize)</p>
                    <p><strong>Request Body:</strong></p>
                    <div class="code-block">
{
  "code": "def hello(): print('world')",
  "task": "explain",
  "language": "python"
}
                    </div>
                </div>
                
                <div class="api-endpoint">
                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <span class="method post">POST</span>
                        <h4 style="margin-left: 10px; margin-bottom: 0;">/reasoning</h4>
                    </div>
                    <p>Step-by-step problem solving</p>
                </div>
                
                <div class="api-endpoint">
                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
                        <span class="method post">POST</span>
                        <h4 style="margin-left: 10px; margin-bottom: 0;">/analyze-sentiment</h4>
                    </div>
                    <p>Analyze text sentiment</p>
                </div>
                
                <h3>cURL Examples</h3>
                
                <h4>Health Check</h4>
                <div class="curl-example">
curl https://sheikhcoders-ai-model-runner.hf.space/health
                </div>
                
                <h4>Code Analysis</h4>
                <div class="curl-example">
curl -X POST https://sheikhcoders-ai-model-runner.hf.space/code \
  -H "Content-Type: application/json" \
  -d '{"code": "def hello(): return \"world\"", "task": "explain", "language": "python"}'
                </div>
                
                <h4>Chat</h4>
                <div class="curl-example">
curl -X POST https://sheikhcoders-ai-model-runner.hf.space/chat \
  -H "Content-Type: application/json" \
  -d '{"messages": [{"role": "user", "content": "Hello!"}]}'
                </div>
            </div>
            
            <!-- Examples Tab -->
            <div id="examples" class="tab-content">
                <h2>💡 Usage Examples</h2>
                
                <h3>Python Integration Example</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyToClipboard('python-example')">Copy</button>
                    <div id="python-example">
import requests

class AIIntegrator:
    def __init__(self, base_url="https://sheikhcoders-ai-model-runner.hf.space"):
        self.base_url = base_url
    
    def health_check(self):
        response = requests.get(f"{self.base_url}/health")
        return response.json()
    
    def analyze_code(self, code, task="explain", language="python"):
        data = {
            "code": code,
            "task": task,
            "language": language
        }
        response = requests.post(f"{self.base_url}/code", json=data)
        return response.json()
    
    def chat(self, messages, model="microsoft/DialoGPT-medium"):
        data = {
            "messages": messages,
            "model": model
        }
        response = requests.post(f"{self.base_url}/chat", json=data)
        return response.json()

# Usage
integrator = AIIntegrator()

# Check health
print("Health:", integrator.health_check())

# Analyze code
code_analysis = integrator.analyze_code(
    "def fibonacci(n): return [fib(i) for i in range(n)]",
    task="explain",
    language="python"
)
print("Analysis:", code_analysis)
                    </div>
                </div>
                
                <h3>JavaScript Integration Example</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyToClipboard('js-example')">Copy</button>
                    <div id="js-example">
class AIIntegrator {
    constructor(baseUrl = "https://sheikhcoders-ai-model-runner.hf.space") {
        this.baseUrl = baseUrl;
    }
    
    async healthCheck() {
        const response = await fetch(`${this.baseUrl}/health`);
        return response.json();
    }
    
    async analyzeCode(code, task = "explain", language = "python") {
        const data = { code, task, language };
        const response = await fetch(`${this.baseUrl}/code`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        return response.json();
    }
    
    async chat(messages, model = "microsoft/DialoGPT-medium") {
        const data = { messages, model };
        const response = await fetch(`${this.baseUrl}/chat`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        return response.json();
    }
}

// Usage
const integrator = new AIIntegrator();

integrator.healthCheck().then(result => {
    console.log("Health:", result);
});

integrator.analyzeCode("console.log('Hello World')", "explain", "javascript")
    .then(result => {
        console.log("Analysis:", result);
    });
                    </div>
                </div>
                
                <h3>Claude Code Integration Script</h3>
                <div class="code-block">
                    <button class="copy-btn" onclick="copyToClipboard('claude-integration')">Copy</button>
                    <div id="claude-integration">
# Claude Code Integration Script
# Save as: ~/setup-claude-integration.py

import os
import json
import shutil

def setup_claude_integration():
    """Setup Claude Code with AI Model Runner"""
    
    # Create settings directory
    settings_dir = os.path.expanduser("~/.claude")
    if not os.path.exists(settings_dir):
        os.makedirs(settings_dir)
        print(f"📁 Created directory: {settings_dir}")
    
    # Backup existing settings
    settings_file = os.path.join(settings_dir, "settings.json")
    if os.path.exists(settings_file):
        backup_file = settings_file + ".backup"
        shutil.copy2(settings_file, backup_file)
        print(f"💾 Backed up existing settings to: {backup_file}")
        
        # Load existing settings
        with open(settings_file, 'r') as f:
            settings = json.load(f)
    else:
        settings = {}
    
    # Add AI Model Runner configuration
    if "claude" not in settings:
        settings["claude"] = {}
    if "api" not in settings["claude"]:
        settings["claude"]["api"] = {}
    if "endpoints" not in settings["claude"]["api"]:
        settings["claude"]["api"]["endpoints"] = {}
    
    settings["claude"]["api"]["endpoints"]["ai_model_runner"] = {
        "url": "https://sheikhcoders-ai-model-runner.hf.space",
        "description": "AI Model Runner - Code analysis, dialogue, and reasoning",
        "capabilities": {
            "code_analysis": ["explain", "refactor", "debug", "optimize"],
            "dialogue": "microsoft/DialoGPT-medium",
            "reasoning": "step-by-step problem solving",
            "sentiment": "text sentiment analysis"
        }
    }
    
    # Save settings
    with open(settings_file, 'w') as f:
        json.dump(settings, f, indent=2)
    
    print(f"✅ Configuration saved to: {settings_file}")
    print("🚀 AI Model Runner is now integrated with Claude Code!")
    print(f"📡 API Endpoint: https://sheikhcoders-ai-model-runner.hf.space")

if __name__ == "__main__":
    setup_claude_integration()
                    </div>
                </div>
            </div>
            
            <!-- Troubleshooting Tab -->
            <div id="troubleshooting" class="tab-content">
                <h2>🔧 Troubleshooting</h2>
                
                <h3>Common Issues</h3>
                
                <div class="grid">
                    <div class="card">
                        <h3>🚫 Space Not Loading</h3>
                        <p><strong>Issue:</strong> "Preparing Space" message persists</p>
                        <p><strong>Solution:</strong></p>
                        <ul>
                            <li>Wait 2-5 minutes for initial build</li>
                            <li>Check Hugging Face Space logs</li>
                            <li>Verify no syntax errors in code</li>
                        </ul>
                    </div>
                    
                    <div class="card">
                        <h3>🔌 Connection Timeout</h3>
                        <p><strong>Issue:</strong> Requests timeout</p>
                        <p><strong>Solution:</strong></p>
                        <ul>
                            <li>First load takes longer (model loading)</li>
                            <li>Check internet connection</li>
                            <li>Try again in a few minutes</li>
                        </ul>
                    </div>
                    
                    <div class="card">
                        <h3>📁 Settings File Not Found</h3>
                        <p><strong>Issue:</strong> ~/.claude/settings.json doesn't exist</p>
                        <p><strong>Solution:</strong></p>
                        <ul>
                            <li>Create the directory: mkdir -p ~/.claude</li>
                            <li>Copy the configuration manually</li>
                            <li>Use the setup script</li>
                        </ul>
                    </div>
                    
                    <div class="card">
                        <h3>❌ API Returns 404</h3>
                        <p><strong>Issue:</strong> Endpoint not found</p>
                        <p><strong>Solution:</strong></p>
                        <ul>
                            <li>Verify space URL is correct</li>
                            <li>Check space is fully built</li>
                            <li>Use correct endpoint paths</li>
                        </ul>
                    </div>
                </div>
                
                <h3>Testing Your Setup</h3>
                
                <div class="step">
                    <h4>1. Check API Health</h4>
                    <div class="curl-example">
curl https://sheikhcoders-ai-model-runner.hf.space/health
                    </div>
                    <p>Expected response: <code>{"status": "healthy"}</code></p>
                </div>
                
                <div class="step">
                    <h4>2. Test Code Analysis</h4>
                    <div class="curl-example">
curl -X POST https://sheikhcoders-ai-model-runner.hf.space/code \
  -H "Content-Type: application/json" \
  -d '{"code": "print(\"Hello World\")", "task": "explain"}'
                    </div>
                </div>
                
                <div class="step">
                    <h4>3. Verify Settings File</h4>
                    <div class="code-block">
cat ~/.claude/settings.json
                    </div>
                    <p>Look for the "ai_model_runner" endpoint configuration</p>
                </div>
                
                <div class="warning">
                    <h4>⚠️ Performance Notes</h4>
                    <ul>
                        <li><strong>First Load:</strong> 30-60 seconds (model loading)</li>
                        <li><strong>Subsequent Requests:</strong> 2-5 seconds (cached models)</li>
                        <li><strong>Model Loading:</strong> Automatically handled on startup</li>
                        <li><strong>Graceful Fallbacks:</strong> Mock responses if models fail</li>
                    </ul>
                </div>
                
                <div class="success">
                    <h4>✅ Success Indicators</h4>
                    <ul>
                        <li>Health check returns "healthy" status</li>
                        <li>Code analysis returns detailed explanations</li>
                        <li>Chat responses are coherent</li>
                        <li>All endpoints return proper JSON</li>
                    </ul>
                </div>
                
                <h3>Debugging Commands</h3>
                <div class="code-block">
# Check space status
curl -I https://sheikhcoders-ai-model-runner.hf.space/

# List available endpoints
curl https://sheikhcoders-ai-model-runner.hf.space/

# Test specific endpoint
curl -X GET https://sheikhcoders-ai-model-runner.hf.space/models

# Check settings file
ls -la ~/.claude/
cat ~/.claude/settings.json
                </div>
            </div>
            
            <div id="status"></div>
        </div>
    </div>
    
    <script>
        function showTab(tabName) {
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Show selected tab
            document.getElementById(tabName).classList.add('active');
            event.target.classList.add('active');
        }
        
        function copyToClipboard(elementId) {
            const element = document.getElementById(elementId);
            const text = element.textContent;
            
            navigator.clipboard.writeText(text).then(() => {
                showStatus('Copied to clipboard!', false);
            }).catch(err => {
                console.error('Failed to copy: ', err);
                showStatus('Failed to copy to clipboard', true);
            });
        }
        
        function downloadSetupScripts() {
            const pythonScript = `import os
import json

# Create settings directory
settings_dir = os.path.expanduser("~/.claude")
os.makedirs(settings_dir, exist_ok=True)

# Configuration
config = {
    "claude": {
        "api": {
            "endpoints": {
                "ai_model_runner": {
                    "url": "https://sheikhcoders-ai-model-runner.hf.space",
                    "description": "AI Model Runner - Code analysis, dialogue, and reasoning"
                }
            }
        }
    }
}

# Save settings
settings_file = os.path.join(settings_dir, "settings.json")
with open(settings_file, 'w') as f:
    json.dump(config, f, indent=2)

print(f"✅ Configuration saved to: {settings_file}")
print("🚀 Claude Code integration complete!")`;

            const bashScript = `#!/bin/bash
mkdir -p ~/.claude
cat > ~/.claude/settings.json << 'EOF'
{
  "claude": {
    "api": {
      "endpoints": {
        "ai_model_runner": {
          "url": "https://sheikhcoders-ai-model-runner.hf.space",
          "description": "AI Model Runner - Code analysis, dialogue, and reasoning"
        }
      }
    }
  }
}
EOF
echo "✅ Configuration created at ~/.claude/settings.json"
echo "🚀 Claude Code integration complete!"`;

            // Create download links
            const pythonBlob = new Blob([pythonScript], {type: 'text/x-python'});
            const bashBlob = new Blob([bashScript], {type: 'text/x-shellscript'});
            
            const pythonUrl = URL.createObjectURL(pythonBlob);
            const bashUrl = URL.createObjectURL(bashBlob);
            
            const a1 = document.createElement('a');
            a1.href = pythonUrl;
            a1.download = 'setup-claude-integration.py';
            a1.click();
            
            const a2 = document.createElement('a');
            a2.href = bashUrl;
            a2.download = 'setup-claude-integration.sh';
            a2.click();
            
            showStatus('Setup scripts downloaded!', false);
        }
        
        function showStatus(message, isError = false) {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = `<div class="${isError ? 'warning' : 'success'}" style="position: fixed; top: 20px; right: 20px; z-index: 1000; max-width: 300px;">${message}</div>`;
            setTimeout(() => {
                statusDiv.innerHTML = '';
            }, 3000);
        }
        
        // Check API status on load
        setTimeout(() => {
            fetch('https://sheikhcoders-ai-model-runner.hf.space/health')
                .then(response => {
                    if (response.ok) {
                        showStatus('✅ API is ready!', false);
                    } else {
                        showStatus('⚠️ API is still building. Please wait...', true);
                    }
                })
                .catch(() => {
                    showStatus('⚠️ API is still building. Please wait...', true);
                });
        }, 2000);
    </script>
</body>
</html>