updated

.dockerignore

@@ -0,0 +1,14 @@
+.git
+.gitattributes
+.env
+*.md
+!README.md
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.venv/
+*.log 

.env.example

@@ -0,0 +1,9 @@
+# Port for the Flask app
+PORT=7860
+
+# Host for the Flask app (0.0.0.0 for Docker)
+HOST=0.0.0.0
+
+# Default model names (change if model names differ)
+GROK_IMAGE_MODEL=grok-2-image-1212
+GROK_VISION_MODEL=grok-2-vision-1212 

.gitignore

@@ -0,0 +1,47 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+.env
+
+# Virtual Environment
+venv/
+ENV/
+.venv/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Editors
+.idea/
+.vscode/
+*.swp
+*.swo
+*~ 

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Environment variables
+ENV PORT=7860
+ENV HOST=0.0.0.0
+
+# Expose the port
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"] 

HF-Grok

@@ -0,0 +1 @@
+Subproject commit c1227034d867658f0611206dc85cd619138a4953

README.md

@@ -1,10 +1,65 @@
 ---
-title: HF Grok
-emoji: 📉
-colorFrom: green
-colorTo: pink
+title: Grok-2 AI Interface
+emoji: 🤖
+colorFrom: indigo
+colorTo: blue
 sdk: static
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Grok-2 AI Interface
+
+A Docker-based web interface for interacting with Grok-2 AI models. This application provides a secure way to use Grok-2 models for image generation and vision analysis through a server-side implementation.
+
+## Features
+
+- **Image Generation**: Create images from text descriptions using Grok-2-Image-1212
+- **Vision Analysis**: Upload images for AI analysis using Grok-2-Vision-1212
+- **Secure API Key Handling**: Your API key is stored in your browser and only sent to our backend (not third parties)
+- **Server-Side API Calls**: All requests to the Grok-2 API are made securely from the server
+
+## Requirements
+
+- Docker
+- Grok-2 API key from xAI
+
+## Running with Docker
+
+1. Build the Docker image:
+   ```
+   docker build -t grok2-interface .
+   ```
+
+2. Run the container:
+   ```
+   docker run -p 7860:7860 grok2-interface
+   ```
+
+3. Open your browser and go to: `http://localhost:7860`
+
+## Using the Application
+
+1. On the first tab, enter your Grok-2 API key and save it
+2. Navigate to either the Image Generation or Vision Analysis tab
+3. For Image Generation:
+   - Enter a detailed text prompt
+   - Click "Generate Image"
+4. For Vision Analysis:
+   - Upload an image
+   - Optionally enter a question about the image
+   - Click "Analyze Image"
+
+## Deploying to Hugging Face Spaces
+
+To deploy this application to Hugging Face Spaces:
+
+1. Create a new Space with Docker SDK
+2. Push this code to the Space's repository
+3. The Space will automatically build and deploy the Docker container
+
+## Security Notes
+
+- Your API key is stored in your browser's localStorage
+- The key is only sent to our backend server to make API calls
+- Our server doesn't log or store your API key
+- All communication with the Grok-2 API happens server-side for security

app.py

@@ -0,0 +1,201 @@
+import os
+import base64
+import requests
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+from PIL import Image
+import io
+from dotenv import load_dotenv
+
+# Load environment variables from .env file if present
+load_dotenv()
+
+# Get environment variables
+PORT = int(os.environ.get('PORT', 7860))
+HOST = os.environ.get('HOST', '0.0.0.0')
+GROK_IMAGE_MODEL = os.environ.get('GROK_IMAGE_MODEL', 'grok-2-image-1212')
+GROK_VISION_MODEL = os.environ.get('GROK_VISION_MODEL', 'grok-2-vision-1212')
+
+app = Flask(__name__, static_folder='static')
+CORS(app)
+
+# Route to serve the frontend
+@app.route('/', defaults={'path': ''})
+@app.route('/<path:path>')
+def serve(path):
+    if path != "" and os.path.exists(os.path.join(app.static_folder, path)):
+        return send_from_directory(app.static_folder, path)
+    else:
+        return send_from_directory(app.static_folder, 'index.html')
+
+# Image generation API
+@app.route('/api/generate-image', methods=['POST'])
+def generate_image():
+    data = request.json
+    api_key = data.get('api_key')
+    prompt = data.get('prompt')
+    use_openai_format = data.get('use_openai_format', False)
+    
+    if not api_key or not prompt:
+        return jsonify({"error": "Missing API key or prompt"}), 400
+    
+    try:
+        headers = {
+            "Content-Type": "application/json",
+            "Authorization": f"Bearer {api_key}"
+        }
+        
+        # OpenAI SDK-style format or original format - both use the same endpoint
+        json_data = {
+            "model": "grok-2-image-1212",  # Use the specific Grok-2 image model
+            "prompt": prompt
+            # Simplified request: removed n and size parameters
+        }
+        
+        print(f"Sending request to x.ai API with data: {json_data}")
+        print(f"Using authorization header: Bearer {api_key[:10]}...")
+        
+        # The correct endpoint for x.ai image generation
+        response = requests.post(
+            "https://api.x.ai/v1/images/generations",
+            headers=headers,
+            json=json_data
+        )
+        
+        if not response.ok:
+            # Print detailed error information
+            print(f"X.AI API Error Status: {response.status_code}")
+            print(f"X.AI API Error Response: {response.text}")
+            try:
+                error_data = response.json()
+                print(f"X.AI API Error JSON: {error_data}")
+                return jsonify({"error": error_data.get('error', {}).get('message', f"API error: {response.status_code}")}), response.status_code
+            except:
+                return jsonify({"error": f"API error: {response.status_code}, Response: {response.text}"}), response.status_code
+        
+        result = response.json()
+        print(f"X.AI API Success Response: {result}")
+        
+        # Handle different possible response formats
+        image_url = None
+        caption = None
+        
+        if 'data' in result and len(result['data']) > 0:
+            data_item = result['data'][0]
+            if 'url' in data_item:
+                image_url = data_item['url']
+            if 'revised_prompt' in data_item:
+                caption = data_item['revised_prompt']
+        elif 'images' in result and len(result['images']) > 0:
+            image_url = result['images'][0]
+        elif 'url' in result:
+            image_url = result['url']
+        
+        if not image_url:
+            print(f"No image URL found in response: {result}")
+            return jsonify({"error": "Unexpected API response format", "details": result}), 500
+            
+        response_data = {"image_url": image_url}
+        if caption:
+            response_data["caption"] = caption
+            
+        return jsonify(response_data)
+        
+    except requests.exceptions.RequestException as e:
+        # If the API returns an error response
+        print(f"Request exception: {str(e)}")
+        if hasattr(e, 'response') and e.response is not None:
+            try:
+                error_data = e.response.json()
+                print(f"Error response JSON: {error_data}")
+                return jsonify({"error": error_data.get('error', {}).get('message', str(e))}), e.response.status_code
+            except:
+                print(f"Could not parse error response: {e.response.text}")
+                return jsonify({"error": f"API error: {e.response.status_code}"}), e.response.status_code
+        return jsonify({"error": str(e)}), 500
+
+# Image analysis API
+@app.route('/api/analyze-image', methods=['POST'])
+def analyze_image():
+    api_key = request.form.get('api_key')
+    prompt = request.form.get('prompt', 'Describe this image in detail')
+    
+    if not api_key or 'image' not in request.files:
+        return jsonify({"error": "Missing API key or image"}), 400
+    
+    try:
+        # Process the uploaded image
+        image_file = request.files['image']
+        img = Image.open(image_file)
+        
+        # Convert to base64
+        buffered = io.BytesIO()
+        img.save(buffered, format=img.format if img.format else 'JPEG')
+        img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
+        
+        # Determine image mime type
+        format_mapping = {
+            'JPEG': 'image/jpeg',
+            'PNG': 'image/png',
+            'GIF': 'image/gif',
+            'WEBP': 'image/webp'
+        }
+        mime_type = format_mapping.get(img.format, 'image/jpeg')
+        
+        # Call the Grok Vision API
+        response = requests.post(
+            "https://api.x.ai/v1/chat/completions",
+            headers={
+                "Content-Type": "application/json",
+                "Authorization": f"Bearer {api_key}"
+            },
+            json={
+                "model": GROK_VISION_MODEL,
+                "messages": [
+                    {
+                        "role": "user",
+                        "content": [
+                            {"type": "text", "text": prompt},
+                            {
+                                "type": "image_url",
+                                "image_url": {
+                                    "url": f"data:{mime_type};base64,{img_str}"
+                                }
+                            }
+                        ]
+                    }
+                ],
+                "max_tokens": 1000
+            }
+        )
+        
+        response.raise_for_status()
+        result = response.json()
+        
+        # Handle different response formats
+        if 'choices' in result and len(result['choices']) > 0 and 'message' in result['choices'][0]:
+            analysis = result['choices'][0]['message']['content']
+        elif 'response' in result:
+            analysis = result['response']
+        else:
+            return jsonify({"error": "Unexpected API response format", "details": result}), 500
+            
+        return jsonify({"analysis": analysis})
+        
+    except requests.exceptions.RequestException as e:
+        # If the API returns an error response
+        if hasattr(e, 'response') and e.response is not None:
+            try:
+                error_data = e.response.json()
+                return jsonify({"error": error_data.get('error', {}).get('message', str(e))}), e.response.status_code
+            except:
+                return jsonify({"error": f"API error: {e.response.status_code}"}), e.response.status_code
+        return jsonify({"error": str(e)}), 500
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    print(f"Starting Grok-2 API interface on {HOST}:{PORT}")
+    print(f"Using image model: {GROK_IMAGE_MODEL}")
+    print(f"Using vision model: {GROK_VISION_MODEL}")
+    app.run(host=HOST, port=PORT) 

index.html

@@ -1,19 +1,96 @@
 <!doctype html>
-<html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Grok-2 AI Interface</title>
 		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
+		<header>
+			<div class="container">
+				<h1 class="logo">Grok-2 AI Interface</h1>
+				<nav>
+					<ul>
+						<li><a href="#" class="active" data-section="api-key">API Key</a></li>
+						<li><a href="#" data-section="image-gen">Image Generation</a></li>
+						<li><a href="#" data-section="vision">Vision Analysis</a></li>
+					</ul>
+				</nav>
+			</div>
+		</header>
+
+		<main>
+			<div class="container">
+				<section id="api-key" class="section active">
+					<div class="api-key-container">
+						<h2>API Key Management</h2>
+						<p>Enter your Grok-2 API key below. The key will be stored locally on your device.</p>
+						
+						<div class="input-group">
+							<input type="password" id="api-key-input" placeholder="Enter your Grok-2 API key">
+							<button id="save-api-key" class="btn">Save API Key</button>
+							<button id="clear-api-key" class="btn btn-secondary">Clear Saved Key</button>
+						</div>
+						
+						<div id="api-key-status"></div>
+					</div>
+				</section>
+
+				<section id="image-gen" class="section">
+					<div class="model-card">
+						<div class="model-info">
+							<h2>Grok-2-Image-1212</h2>
+							<p>Image Generation Model</p>
+							<p>Our latest image generation model, capable of creating high-quality, detailed images from text prompts with enhanced creativity and precision.</p>
+						</div>
+						
+						<div class="input-container">
+							<textarea id="image-prompt" placeholder="Enter a detailed description of the image you want to generate..."></textarea>
+							<button id="generate-image" class="btn">Generate Image</button>
+						</div>
+						
+						<div class="result-container">
+							<div id="image-result" class="result-box"></div>
+							<div id="generation-status" class="status"></div>
+						</div>
+					</div>
+				</section>
+
+				<section id="vision" class="section">
+					<div class="model-card">
+						<div class="model-info">
+							<h2>Grok-2-Vision-1212</h2>
+							<p>Image Analysis Model</p>
+							<p>Our latest image understanding model with increased context window that can process a wide variety of visual information, including documents, diagrams, charts, screenshots, and photographs.</p>
+						</div>
+						
+						<div class="input-container">
+							<div class="upload-area" id="upload-area">
+								<p>Drag and drop an image or click to upload</p>
+								<input type="file" id="image-upload" accept="image/*" hidden>
+							</div>
+							<textarea id="vision-prompt" placeholder="Optional: Enter a question about the image..."></textarea>
+							<button id="analyze-image" class="btn" disabled>Analyze Image</button>
+						</div>
+						
+						<div class="result-container">
+							<div id="uploaded-image" class="uploaded-image"></div>
+							<div id="vision-result" class="result-box"></div>
+							<div id="vision-status" class="status"></div>
+						</div>
+					</div>
+				</section>
+			</div>
+		</main>
+
+		<footer>
+			<div class="container">
+				<p>This is an unofficial interface. Grok-2 is a product of xAI.</p>
+				<p>Your API key is stored locally in your browser and is never sent to our servers.</p>
+			</div>
+		</footer>
+
+		<script src="script.js"></script>
 	</body>
 </html>

requirements.txt

@@ -0,0 +1,6 @@
+flask==2.0.1
+requests==2.28.1
+python-dotenv==0.20.0
+gunicorn==20.1.0
+Pillow==9.1.0
+Flask-Cors==3.0.10 

script.js

@@ -0,0 +1,323 @@
+// Wait for the DOM to be fully loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // API key storage in localStorage
+    const API_KEY_STORAGE_KEY = 'grok2_api_key';
+    const apiKeyInput = document.getElementById('api-key-input');
+    const saveApiKeyBtn = document.getElementById('save-api-key');
+    const clearApiKeyBtn = document.getElementById('clear-api-key');
+    const apiKeyStatus = document.getElementById('api-key-status');
+
+    // Navigation
+    const navLinks = document.querySelectorAll('nav ul li a');
+    const sections = document.querySelectorAll('.section');
+
+    // Image Generation
+    const imagePromptInput = document.getElementById('image-prompt');
+    const generateImageBtn = document.getElementById('generate-image');
+    const imageResult = document.getElementById('image-result');
+    const generationStatus = document.getElementById('generation-status');
+
+    // Vision Analysis
+    const uploadArea = document.getElementById('upload-area');
+    const imageUploadInput = document.getElementById('image-upload');
+    const visionPromptInput = document.getElementById('vision-prompt');
+    const analyzeImageBtn = document.getElementById('analyze-image');
+    const uploadedImageContainer = document.getElementById('uploaded-image');
+    const visionResult = document.getElementById('vision-result');
+    const visionStatus = document.getElementById('vision-status');
+
+    let uploadedImage = null;
+
+    // Check if API key is stored on load
+    checkStoredApiKey();
+
+    // API Key Management
+    function checkStoredApiKey() {
+        const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+        if (storedApiKey) {
+            apiKeyStatus.textContent = '✅ API key is stored';
+            apiKeyStatus.style.color = '#27ae60';
+            // Mask the input for security
+            apiKeyInput.value = '•'.repeat(12);
+        } else {
+            apiKeyStatus.textContent = '❌ No API key stored';
+            apiKeyStatus.style.color = '#e74c3c';
+            apiKeyInput.value = '';
+        }
+    }
+
+    saveApiKeyBtn.addEventListener('click', function() {
+        const apiKey = apiKeyInput.value.trim();
+        if (apiKey && apiKey !== '•'.repeat(12)) {
+            localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
+            apiKeyStatus.textContent = '✅ API key saved successfully';
+            apiKeyStatus.style.color = '#27ae60';
+            // Mask the input for security
+            apiKeyInput.value = '•'.repeat(12);
+        } else if (apiKey === '•'.repeat(12)) {
+            apiKeyStatus.textContent = '❓ Please enter a new API key';
+            apiKeyStatus.style.color = '#f39c12';
+        } else {
+            apiKeyStatus.textContent = '❌ Please enter a valid API key';
+            apiKeyStatus.style.color = '#e74c3c';
+        }
+    });
+
+    clearApiKeyBtn.addEventListener('click', function() {
+        localStorage.removeItem(API_KEY_STORAGE_KEY);
+        apiKeyInput.value = '';
+        apiKeyStatus.textContent = '🗑️ API key cleared';
+        apiKeyStatus.style.color = '#e74c3c';
+    });
+
+    // Navigation between sections
+    navLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            // Remove active class from all links and add to current
+            navLinks.forEach(l => l.classList.remove('active'));
+            this.classList.add('active');
+            
+            // Show the selected section
+            const targetSection = this.getAttribute('data-section');
+            sections.forEach(section => {
+                section.classList.remove('active');
+                if (section.id === targetSection) {
+                    section.classList.add('active');
+                }
+            });
+        });
+    });
+
+    // Image Upload Handling
+    uploadArea.addEventListener('click', function() {
+        imageUploadInput.click();
+    });
+
+    uploadArea.addEventListener('dragover', function(e) {
+        e.preventDefault();
+        this.classList.add('dragover');
+    });
+
+    uploadArea.addEventListener('dragleave', function() {
+        this.classList.remove('dragover');
+    });
+
+    uploadArea.addEventListener('drop', function(e) {
+        e.preventDefault();
+        this.classList.remove('dragover');
+        
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            handleImageUpload(e.dataTransfer.files[0]);
+        }
+    });
+
+    imageUploadInput.addEventListener('change', function() {
+        if (this.files && this.files[0]) {
+            handleImageUpload(this.files[0]);
+        }
+    });
+
+    function handleImageUpload(file) {
+        if (!file.type.match('image.*')) {
+            visionStatus.textContent = '❌ Please upload an image file';
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            const img = document.createElement('img');
+            img.src = e.target.result;
+            uploadedImageContainer.innerHTML = '';
+            uploadedImageContainer.appendChild(img);
+            uploadedImage = file;
+            analyzeImageBtn.disabled = false;
+            visionStatus.textContent = '✅ Image uploaded successfully';
+        };
+        reader.readAsDataURL(file);
+    }
+
+    // Image Generation
+    generateImageBtn.addEventListener('click', function() {
+        const prompt = imagePromptInput.value.trim();
+        if (!prompt) {
+            generationStatus.textContent = '❌ Please enter a prompt';
+            return;
+        }
+
+        const apiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+        if (!apiKey) {
+            generationStatus.textContent = '❌ API key is required. Please add your API key in the API Key section.';
+            return;
+        }
+
+        // Show loading state
+        generationStatus.textContent = '⏳ Generating image...';
+        generateImageBtn.disabled = true;
+
+        // Call the Grok-2 Image API
+        callGrokImageApi(prompt, apiKey)
+            .then(imageUrl => {
+                // Display the generated image
+                imageResult.innerHTML = `<img src="${imageUrl}" alt="Generated image">`;
+                generationStatus.textContent = '✅ Image generated successfully';
+            })
+            .catch(error => {
+                generationStatus.textContent = `❌ Error: ${error.message}`;
+                console.error('Image generation error:', error);
+            })
+            .finally(() => {
+                generateImageBtn.disabled = false;
+            });
+    });
+
+    // Vision Analysis
+    analyzeImageBtn.addEventListener('click', function() {
+        if (!uploadedImage) {
+            visionStatus.textContent = '❌ Please upload an image first';
+            return;
+        }
+
+        const prompt = visionPromptInput.value.trim() || 'Describe this image in detail';
+        const apiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+        if (!apiKey) {
+            visionStatus.textContent = '❌ API key is required. Please add your API key in the API Key section.';
+            return;
+        }
+
+        // Show loading state
+        visionStatus.textContent = '⏳ Analyzing image...';
+        analyzeImageBtn.disabled = true;
+
+        // Call the Grok-2 Vision API
+        callGrokVisionApi(uploadedImage, prompt, apiKey)
+            .then(analysisResult => {
+                // Display the analysis result
+                visionResult.textContent = analysisResult;
+                visionStatus.textContent = '✅ Analysis completed';
+            })
+            .catch(error => {
+                visionStatus.textContent = `❌ Error: ${error.message}`;
+                console.error('Vision analysis error:', error);
+            })
+            .finally(() => {
+                analyzeImageBtn.disabled = false;
+            });
+    });
+
+    // API Calls 
+    async function callGrokImageApi(prompt, apiKey) {
+        generationStatus.textContent = '⏳ Calling Grok-2 Image API...';
+        
+        try {
+            const response = await fetch('https://api.x.ai/v1/images/generations', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${apiKey}`
+                },
+                body: JSON.stringify({
+                    model: "grok-2-image-1212",
+                    prompt: prompt,
+                    n: 1,
+                    size: "1024x1024"
+                })
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({ error: { message: `Status code: ${response.status}` } }));
+                console.log("API Error Response:", errorData);
+                throw new Error(errorData.error?.message || `API error: ${response.status}`);
+            }
+
+            const data = await response.json();
+            console.log("API Success Response:", data);
+            
+            // Handle various response formats
+            if (data.data && data.data[0] && data.data[0].url) {
+                return data.data[0].url; // OpenAI format
+            } else if (data.images && data.images[0]) {
+                return data.images[0]; // Alternate format
+            } else if (data.url) {
+                return data.url; // Simple format
+            } else {
+                console.log("Unexpected response format:", data);
+                throw new Error("Unexpected response format from API");
+            }
+        } catch (error) {
+            console.error('Image generation API error:', error);
+            throw new Error(`Failed to generate image: ${error.message}`);
+        }
+    }
+
+    async function callGrokVisionApi(imageFile, prompt, apiKey) {
+        visionStatus.textContent = '⏳ Calling Grok-2 Vision API...';
+        
+        try {
+            // Convert image to base64
+            const base64Image = await fileToBase64(imageFile);
+            
+            const response = await fetch('https://api.x.ai/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${apiKey}`
+                },
+                body: JSON.stringify({
+                    model: "grok-2-vision-1212",
+                    messages: [
+                        {
+                            role: "user",
+                            content: [
+                                { type: "text", text: prompt },
+                                {
+                                    type: "image_url",
+                                    image_url: {
+                                        url: `data:image/${imageFile.type};base64,${base64Image}`
+                                    }
+                                }
+                            ]
+                        }
+                    ],
+                    max_tokens: 1000
+                })
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({ error: { message: `Status code: ${response.status}` } }));
+                console.log("Vision API Error Response:", errorData);
+                throw new Error(errorData.error?.message || `API error: ${response.status}`);
+            }
+
+            const data = await response.json();
+            console.log("Vision API Success Response:", data);
+            
+            // Handle different response formats
+            if (data.choices && data.choices[0] && data.choices[0].message) {
+                return data.choices[0].message.content;
+            } else if (data.response) {
+                return data.response;
+            } else {
+                console.log("Unexpected vision response format:", data);
+                return "Received a response from the API, but in an unexpected format.";
+            }
+        } catch (error) {
+            console.error('Vision API error:', error);
+            throw new Error(`Failed to analyze image: ${error.message}`);
+        }
+    }
+
+    // Helper function to convert File to base64
+    function fileToBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const base64String = reader.result.split(',')[1];
+                resolve(base64String);
+            };
+            reader.onerror = error => reject(error);
+        });
+    }
+}); 

static/index.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Grok-2 AI Interface</title>
+		<link rel="stylesheet" href="style.css" />
+		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+	</head>
+	<body>
+		<header>
+			<div class="container">
+				<h1 class="logo">Grok-2 AI Interface</h1>
+				<nav>
+					<ul>
+						<li><a href="#" class="active" data-section="api-key">API Key</a></li>
+						<li><a href="#" data-section="image-gen">Image Generation</a></li>
+						<li><a href="#" data-section="vision">Vision Analysis</a></li>
+					</ul>
+				</nav>
+			</div>
+		</header>
+
+		<main>
+			<div class="container">
+				<section id="api-key" class="section active">
+					<div class="api-key-container">
+						<h2>API Key Management</h2>
+						<p>Enter your Grok-2 API key below. The key will be stored locally on your device.</p>
+						
+						<div class="input-group">
+							<input type="password" id="api-key-input" placeholder="Enter your Grok-2 API key">
+							<button id="save-api-key" class="btn">Save API Key</button>
+							<button id="clear-api-key" class="btn btn-secondary">Clear Saved Key</button>
+						</div>
+						
+						<div id="api-key-status"></div>
+					</div>
+				</section>
+
+				<section id="image-gen" class="section">
+					<div class="model-card">
+						<div class="model-info">
+							<h2>Grok-2-Image-1212</h2>
+							<p>Image Generation Model</p>
+							<p>Our latest image generation model, capable of creating high-quality, detailed images from text prompts with enhanced creativity and precision.</p>
+						</div>
+						
+						<div class="input-container">
+							<textarea id="image-prompt" placeholder="Enter a detailed description of the image you want to generate..."></textarea>
+							<button id="generate-image" class="btn">Generate Image</button>
+						</div>
+						
+						<div class="result-container">
+							<div id="image-result" class="result-box"></div>
+							<div id="generation-status" class="status"></div>
+						</div>
+					</div>
+				</section>
+
+				<section id="vision" class="section">
+					<div class="model-card">
+						<div class="model-info">
+							<h2>Grok-2-Vision-1212</h2>
+							<p>Image Analysis Model</p>
+							<p>Our latest image understanding model with increased context window that can process a wide variety of visual information, including documents, diagrams, charts, screenshots, and photographs.</p>
+						</div>
+						
+						<div class="input-container">
+							<div class="upload-area" id="upload-area">
+								<p>Drag and drop an image or click to upload</p>
+								<input type="file" id="image-upload" accept="image/*" hidden>
+							</div>
+							<textarea id="vision-prompt" placeholder="Optional: Enter a question about the image..."></textarea>
+							<button id="analyze-image" class="btn" disabled>Analyze Image</button>
+						</div>
+						
+						<div class="result-container">
+							<div id="uploaded-image" class="uploaded-image"></div>
+							<div id="vision-result" class="result-box"></div>
+							<div id="vision-status" class="status"></div>
+						</div>
+					</div>
+				</section>
+			</div>
+		</main>
+
+		<footer>
+			<div class="container">
+				<p>This is an unofficial interface. Grok-2 is a product of xAI.</p>
+				<p>Your API key is stored locally in your browser and is never sent to any third-party servers.</p>
+				<p>The application is running in a Docker container with a secure backend to protect your API key.</p>
+			</div>
+		</footer>
+
+		<script src="script.js"></script>
+	</body>
+</html> 

static/script.js

@@ -0,0 +1,263 @@
+// Wait for the DOM to be fully loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Configure marked.js
+    marked.setOptions({
+        breaks: true,
+        gfm: true,
+        smartLists: true
+    });
+    
+    // API key storage in localStorage
+    const API_KEY_STORAGE_KEY = 'grok2_api_key';
+    const apiKeyInput = document.getElementById('api-key-input');
+    const saveApiKeyBtn = document.getElementById('save-api-key');
+    const clearApiKeyBtn = document.getElementById('clear-api-key');
+    const apiKeyStatus = document.getElementById('api-key-status');
+
+    // Navigation
+    const navLinks = document.querySelectorAll('nav ul li a');
+    const sections = document.querySelectorAll('.section');
+
+    // Image Generation
+    const imagePromptInput = document.getElementById('image-prompt');
+    const generateImageBtn = document.getElementById('generate-image');
+    const imageResult = document.getElementById('image-result');
+    const generationStatus = document.getElementById('generation-status');
+
+    // Vision Analysis
+    const uploadArea = document.getElementById('upload-area');
+    const imageUploadInput = document.getElementById('image-upload');
+    const visionPromptInput = document.getElementById('vision-prompt');
+    const analyzeImageBtn = document.getElementById('analyze-image');
+    const uploadedImageContainer = document.getElementById('uploaded-image');
+    const visionResult = document.getElementById('vision-result');
+    const visionStatus = document.getElementById('vision-status');
+
+    let uploadedImage = null;
+
+    // Check if API key is stored on load
+    checkStoredApiKey();
+
+    // API Key Management
+    function checkStoredApiKey() {
+        const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+        if (storedApiKey) {
+            apiKeyStatus.textContent = '✅ API key is stored';
+            apiKeyStatus.style.color = '#27ae60';
+            // Mask the input for security
+            apiKeyInput.value = '•'.repeat(12);
+        } else {
+            apiKeyStatus.textContent = '❌ No API key stored';
+            apiKeyStatus.style.color = '#e74c3c';
+            apiKeyInput.value = '';
+        }
+    }
+
+    saveApiKeyBtn.addEventListener('click', function() {
+        const apiKey = apiKeyInput.value.trim();
+        if (apiKey && apiKey !== '•'.repeat(12)) {
+            localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
+            apiKeyStatus.textContent = '✅ API key saved successfully';
+            apiKeyStatus.style.color = '#27ae60';
+            // Mask the input for security
+            apiKeyInput.value = '•'.repeat(12);
+        } else if (apiKey === '•'.repeat(12)) {
+            apiKeyStatus.textContent = '❓ Please enter a new API key';
+            apiKeyStatus.style.color = '#f39c12';
+        } else {
+            apiKeyStatus.textContent = '❌ Please enter a valid API key';
+            apiKeyStatus.style.color = '#e74c3c';
+        }
+    });
+
+    clearApiKeyBtn.addEventListener('click', function() {
+        localStorage.removeItem(API_KEY_STORAGE_KEY);
+        apiKeyInput.value = '';
+        apiKeyStatus.textContent = '🗑️ API key cleared';
+        apiKeyStatus.style.color = '#e74c3c';
+    });
+
+    // Navigation between sections
+    navLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            // Remove active class from all links and add to current
+            navLinks.forEach(l => l.classList.remove('active'));
+            this.classList.add('active');
+            
+            // Show the selected section
+            const targetSection = this.getAttribute('data-section');
+            sections.forEach(section => {
+                section.classList.remove('active');
+                if (section.id === targetSection) {
+                    section.classList.add('active');
+                }
+            });
+        });
+    });
+
+    // Image Upload Handling
+    uploadArea.addEventListener('click', function() {
+        imageUploadInput.click();
+    });
+
+    uploadArea.addEventListener('dragover', function(e) {
+        e.preventDefault();
+        this.classList.add('dragover');
+    });
+
+    uploadArea.addEventListener('dragleave', function() {
+        this.classList.remove('dragover');
+    });
+
+    uploadArea.addEventListener('drop', function(e) {
+        e.preventDefault();
+        this.classList.remove('dragover');
+        
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            handleImageUpload(e.dataTransfer.files[0]);
+        }
+    });
+
+    imageUploadInput.addEventListener('change', function() {
+        if (this.files && this.files[0]) {
+            handleImageUpload(this.files[0]);
+        }
+    });
+
+    function handleImageUpload(file) {
+        if (!file.type.match('image.*')) {
+            visionStatus.textContent = '❌ Please upload an image file';
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            const img = document.createElement('img');
+            img.src = e.target.result;
+            uploadedImageContainer.innerHTML = '';
+            uploadedImageContainer.appendChild(img);
+            uploadedImage = file;
+            analyzeImageBtn.disabled = false;
+            visionStatus.textContent = '✅ Image uploaded successfully';
+        };
+        reader.readAsDataURL(file);
+    }
+
+    // Image Generation
+    generateImageBtn.addEventListener('click', function() {
+        const prompt = imagePromptInput.value.trim();
+        if (!prompt) {
+            generationStatus.textContent = '❌ Please enter a prompt';
+            return;
+        }
+
+        const apiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+        if (!apiKey) {
+            generationStatus.textContent = '❌ API key is required. Please add your API key in the API Key section.';
+            return;
+        }
+
+        // Show loading state
+        generationStatus.innerHTML = '<span class="loading"></span> Generating image...';
+        generateImageBtn.disabled = true;
+        imageResult.innerHTML = '';
+
+        // Call the backend API with OpenAI-style format
+        fetch('/api/generate-image', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                api_key: apiKey,
+                prompt: prompt,
+                use_openai_format: true
+            })
+        })
+        .then(response => {
+            if (!response.ok) {
+                return response.json().then(err => { throw err; });
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.image_url) {
+                // Display the generated image
+                let imageHTML = `<img src="${data.image_url}" alt="Generated image">`;
+                
+                // Add caption if available
+                if (data.caption) {
+                    imageHTML += `<div class="image-caption">${data.caption}</div>`;
+                }
+                
+                imageResult.innerHTML = imageHTML;
+                generationStatus.textContent = '✅ Image generated successfully';
+            } else {
+                throw new Error('No image URL in response');
+            }
+        })
+        .catch(error => {
+            generationStatus.textContent = `❌ Error: ${error.error || error.message || 'Unknown error'}`;
+            console.error('Image generation error:', error);
+        })
+        .finally(() => {
+            generateImageBtn.disabled = false;
+        });
+    });
+
+    // Vision Analysis
+    analyzeImageBtn.addEventListener('click', function() {
+        if (!uploadedImage) {
+            visionStatus.textContent = '❌ Please upload an image first';
+            return;
+        }
+
+        const prompt = visionPromptInput.value.trim() || 'Describe this image in detail';
+        const apiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+        if (!apiKey) {
+            visionStatus.textContent = '❌ API key is required. Please add your API key in the API Key section.';
+            return;
+        }
+
+        // Show loading state
+        visionStatus.innerHTML = '<span class="loading"></span> Analyzing image...';
+        analyzeImageBtn.disabled = true;
+        visionResult.textContent = '';
+
+        // Create form data for file upload
+        const formData = new FormData();
+        formData.append('image', uploadedImage);
+        formData.append('api_key', apiKey);
+        formData.append('prompt', prompt);
+
+        // Call the backend API
+        fetch('/api/analyze-image', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => {
+            if (!response.ok) {
+                return response.json().then(err => { throw err; });
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.analysis) {
+                // Display the analysis result with Markdown support
+                visionResult.innerHTML = marked.parse(data.analysis);
+                visionStatus.textContent = '✅ Analysis completed';
+            } else {
+                throw new Error('No analysis in response');
+            }
+        })
+        .catch(error => {
+            visionStatus.textContent = `❌ Error: ${error.error || error.message || 'Unknown error'}`;
+            console.error('Vision analysis error:', error);
+        })
+        .finally(() => {
+            analyzeImageBtn.disabled = false;
+        });
+    });
+}); 

static/style.css

@@ -0,0 +1,369 @@
+/* Global styles */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	line-height: 1.6;
+	color: #333;
+	background-color: #f8f9fa;
+}
+
+.container {
+	width: 95%;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 20px;
+}
+
+a {
+	text-decoration: none;
+	color: #3498db;
+}
+
+/* Header styles */
+header {
+	background-color: #1a1a1a;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	padding: 20px 0;
+	position: sticky;
+	top: 0;
+	z-index: 100;
+}
+
+header .container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.logo {
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: #ffffff;
+}
+
+nav ul {
+	display: flex;
+	list-style: none;
+}
+
+nav ul li {
+	margin-left: 30px;
+}
+
+nav ul li a {
+	color: #ffffff;
+	font-weight: 500;
+	transition: color 0.3s;
+	opacity: 0.8;
+}
+
+nav ul li a:hover,
+nav ul li a.active {
+	color: #3498db;
+	opacity: 1;
+}
+
+/* Main section styles */
+main {
+	padding: 40px 0;
+}
+
+.section {
+	display: none;
+	padding: 20px 0;
+}
+
+.section.active {
+	display: block;
+}
+
+/* API Key Section */
+.api-key-container {
+	background-color: #fff;
+	border-radius: 10px;
+	padding: 30px;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.input-group {
+	margin: 20px 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+input[type="password"] {
+	flex: 1;
+	padding: 12px 15px;
+	border: 1px solid #ddd;
+	border-radius: 5px;
+	font-size: 16px;
+	min-width: 250px;
+}
+
+.btn {
+	display: inline-block;
+	background-color: #3498db;
+	color: white;
+	padding: 12px 20px;
+	border-radius: 5px;
+	font-weight: 500;
+	transition: background-color 0.3s;
+	border: none;
+	cursor: pointer;
+}
+
+.btn:hover {
+	background-color: #2980b9;
+}
+
+.btn-secondary {
+	background-color: #e74c3c;
+}
+
+.btn-secondary:hover {
+	background-color: #c0392b;
+}
+
+#api-key-status {
+	margin-top: 15px;
+	font-weight: 500;
+}
+
+/* Model Cards */
+.model-card {
+	background-color: #fff;
+	border-radius: 10px;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+	overflow: hidden;
+	margin-bottom: 30px;
+}
+
+.model-info {
+	padding: 25px;
+	background-color: #2c3e50;
+	color: #fff;
+}
+
+.model-info h2 {
+	margin-bottom: 10px;
+	font-size: 1.8rem;
+}
+
+.model-info p {
+	color: rgba(255, 255, 255, 0.8);
+	margin-bottom: 10px;
+}
+
+.model-info p:first-of-type {
+	font-weight: 600;
+	color: #3498db;
+}
+
+/* Input Container */
+.input-container {
+	padding: 25px;
+	border-bottom: 1px solid #eee;
+}
+
+textarea {
+	width: 100%;
+	padding: 15px;
+	border: 1px solid #ddd;
+	border-radius: 5px;
+	font-size: 16px;
+	min-height: 120px;
+	margin-bottom: 15px;
+	resize: vertical;
+}
+
+/* Result Container */
+.result-container {
+	padding: 25px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.result-box {
+	min-height: 100px;
+	padding: 15px;
+	border: 1px solid #ddd;
+	border-radius: 5px;
+	background-color: #f9f9f9;
+}
+
+.status {
+	font-style: italic;
+	color: #7f8c8d;
+}
+
+/* Image Upload */
+.upload-area {
+	border: 2px dashed #3498db;
+	border-radius: 5px;
+	padding: 40px 20px;
+	text-align: center;
+	margin-bottom: 15px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+}
+
+.upload-area:hover {
+	background-color: rgba(52, 152, 219, 0.1);
+}
+
+.upload-area.dragover {
+	background-color: rgba(52, 152, 219, 0.2);
+	border-color: #2980b9;
+}
+
+.uploaded-image {
+	max-width: 100%;
+	margin-bottom: 20px;
+	display: flex;
+	justify-content: center;
+}
+
+.uploaded-image img {
+	max-width: 100%;
+	max-height: 400px;
+	border-radius: 5px;
+	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Footer */
+footer {
+	background-color: #2c3e50;
+	color: #ecf0f1;
+	padding: 30px 0;
+	text-align: center;
+}
+
+footer p {
+	margin-bottom: 10px;
+	opacity: 0.8;
+}
+
+/* Loading spinner */
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(255,255,255,.3);
+    border-radius: 50%;
+    border-top-color: #3498db;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	header .container {
+		flex-direction: column;
+	}
+	
+	nav ul {
+		margin-top: 20px;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+	
+	nav ul li {
+		margin: 5px 15px;
+	}
+	
+	.input-group {
+		flex-direction: column;
+	}
+	
+	.input-group input,
+	.input-group button {
+		width: 100%;
+	}
+}
+
+/* Markdown styling */
+#vision-result {
+    line-height: 1.2;
+    padding: 12px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    overflow-wrap: break-word;
+    white-space: pre-line;
+}
+
+#vision-result h1, 
+#vision-result h2, 
+#vision-result h3, 
+#vision-result h4 {
+    margin-top: 0.4em;
+    margin-bottom: 0.2em;
+    color: #2a3990;
+}
+
+#vision-result p {
+    margin-bottom: 0.3em;
+    white-space: pre-line;
+}
+
+#vision-result ul, 
+#vision-result ol {
+    margin-left: 15px;
+    margin-bottom: 0.3em;
+    margin-top: 0.2em;
+}
+
+#vision-result li {
+    margin-bottom: 0em;
+    line-height: 1.2;
+    padding-bottom: 0.1em;
+}
+
+#vision-result code {
+    background-color: #eaeaea;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+}
+
+#vision-result pre {
+    background-color: #eaeaea;
+    padding: 10px;
+    border-radius: 5px;
+    overflow-x: auto;
+}
+
+#vision-result blockquote {
+    border-left: 4px solid #2a3990;
+    padding-left: 15px;
+    margin-left: 0;
+    color: #555;
+}
+
+#vision-result img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Image caption styling */
+.image-caption {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #f5f5f5;
+    border-radius: 5px;
+    font-size: 0.9em;
+    line-height: 1.4;
+    color: #333;
+    border-left: 3px solid #2a3990;
+} 

style.css

@@ -1,28 +1,279 @@
+/* Global styles */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	line-height: 1.6;
+	color: #333;
+	background-color: #f8f9fa;
+}
+
+.container {
+	width: 95%;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 20px;
+}
+
+a {
+	text-decoration: none;
+	color: #3498db;
+}
+
+/* Header styles */
+header {
+	background-color: #1a1a1a;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	padding: 20px 0;
+	position: sticky;
+	top: 0;
+	z-index: 100;
+}
+
+header .container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.logo {
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: #ffffff;
+}
+
+nav ul {
+	display: flex;
+	list-style: none;
+}
+
+nav ul li {
+	margin-left: 30px;
+}
+
+nav ul li a {
+	color: #ffffff;
+	font-weight: 500;
+	transition: color 0.3s;
+	opacity: 0.8;
 }
 
-h1 {
+nav ul li a:hover,
+nav ul li a.active {
+	color: #3498db;
+	opacity: 1;
+}
+
+/* Main section styles */
+main {
+	padding: 40px 0;
+}
+
+.section {
+	display: none;
+	padding: 20px 0;
+}
+
+.section.active {
+	display: block;
+}
+
+/* API Key Section */
+.api-key-container {
+	background-color: #fff;
+	border-radius: 10px;
+	padding: 30px;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.input-group {
+	margin: 20px 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+input[type="password"] {
+	flex: 1;
+	padding: 12px 15px;
+	border: 1px solid #ddd;
+	border-radius: 5px;
 	font-size: 16px;
-	margin-top: 0;
+	min-width: 250px;
+}
+
+.btn {
+	display: inline-block;
+	background-color: #3498db;
+	color: white;
+	padding: 12px 20px;
+	border-radius: 5px;
+	font-weight: 500;
+	transition: background-color 0.3s;
+	border: none;
+	cursor: pointer;
+}
+
+.btn:hover {
+	background-color: #2980b9;
+}
+
+.btn-secondary {
+	background-color: #e74c3c;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
+.btn-secondary:hover {
+	background-color: #c0392b;
+}
+
+#api-key-status {
+	margin-top: 15px;
+	font-weight: 500;
+}
+
+/* Model Cards */
+.model-card {
+	background-color: #fff;
+	border-radius: 10px;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+	overflow: hidden;
+	margin-bottom: 30px;
+}
+
+.model-info {
+	padding: 25px;
+	background-color: #2c3e50;
+	color: #fff;
+}
+
+.model-info h2 {
 	margin-bottom: 10px;
-	margin-top: 5px;
+	font-size: 1.8rem;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.model-info p {
+	color: rgba(255, 255, 255, 0.8);
+	margin-bottom: 10px;
+}
+
+.model-info p:first-of-type {
+	font-weight: 600;
+	color: #3498db;
+}
+
+/* Input Container */
+.input-container {
+	padding: 25px;
+	border-bottom: 1px solid #eee;
+}
+
+textarea {
+	width: 100%;
+	padding: 15px;
+	border: 1px solid #ddd;
+	border-radius: 5px;
+	font-size: 16px;
+	min-height: 120px;
+	margin-bottom: 15px;
+	resize: vertical;
+}
+
+/* Result Container */
+.result-container {
+	padding: 25px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.result-box {
+	min-height: 100px;
+	padding: 15px;
+	border: 1px solid #ddd;
+	border-radius: 5px;
+	background-color: #f9f9f9;
+}
+
+.status {
+	font-style: italic;
+	color: #7f8c8d;
+}
+
+/* Image Upload */
+.upload-area {
+	border: 2px dashed #3498db;
+	border-radius: 5px;
+	padding: 40px 20px;
+	text-align: center;
+	margin-bottom: 15px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+}
+
+.upload-area:hover {
+	background-color: rgba(52, 152, 219, 0.1);
+}
+
+.upload-area.dragover {
+	background-color: rgba(52, 152, 219, 0.2);
+	border-color: #2980b9;
+}
+
+.uploaded-image {
+	max-width: 100%;
+	margin-bottom: 20px;
+	display: flex;
+	justify-content: center;
+}
+
+.uploaded-image img {
+	max-width: 100%;
+	max-height: 400px;
+	border-radius: 5px;
+	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Footer */
+footer {
+	background-color: #2c3e50;
+	color: #ecf0f1;
+	padding: 30px 0;
+	text-align: center;
+}
+
+footer p {
+	margin-bottom: 10px;
+	opacity: 0.8;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Responsive design */
+@media (max-width: 768px) {
+	header .container {
+		flex-direction: column;
+	}
+	
+	nav ul {
+		margin-top: 20px;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+	
+	nav ul li {
+		margin: 5px 15px;
+	}
+	
+	.input-group {
+		flex-direction: column;
+	}
+	
+	.input-group input,
+	.input-group button {
+		width: 100%;
+	}
 }