Spaces:
Runtime error
Runtime error
| <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> |