Upload 5 files

Dockerfile

@@ -0,0 +1,21 @@
+# Use official Python image
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Set environment variables
+ENV PORT=7860
+
+# Expose the port HF Spaces uses
+EXPOSE 7860
+
+# Run the application
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,43 @@
----
-title: Deep
-emoji: 💻
-colorFrom: purple
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Vibe Coding Backend (DeepSeek)
+
+This is a premium FastAPI backend designed for "Vibe Coding" applications. It proxies requests to the DeepSeek API while maintaining high performance and security.
+
+## Deployment on Hugging Face Spaces (100% FREE)
+
+This backend uses the **Hugging Face Serverless Inference API**, which means you don't pay for tokens or GPU time. It is 100% free.
+
+1. **Create a New Space**: 
+   - Go to [huggingface.co/new-space](https://huggingface.co/new-space).
+   - Select **Docker** as the SDK.
+   - Choose a name (e.g., `vibe-coding-free`).
+
+2. **Add Files**:
+   - Upload `app.py`, `index.html`, `Dockerfile`, and `requirements.txt`.
+
+3. **Set your FREE Token**:
+   - In your Space's **Settings**, go to **Variables and Secrets**.
+   - Add a new **Secret**:
+     - Key: `HF_TOKEN`
+     - Value: your_hf_token (Get it for free at [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens))
+
+4. **API Usage**:
+   - Your backend will be available at `https://your-username-vibe-coding-backend.hf.space`.
+   - Use the `/vibe` endpoint with a POST request to generate code.
+
+## Example Request (JSON)
+
+```json
+{
+  "messages": [
+    {"role": "user", "content": "Make a beautiful landing page for a SaaS product."}
+  ],
+  "model": "deepseek-chat",
+  "stream": true
+}
+```
+
+## Features
+- **Streaming Support**: Get real-time code generation.
+- **Vibe Prompting**: Injected system prompt for high-quality, full-stack generations.
+- **CORS Enabled**: Ready to be called from any frontend.
+- **Scalable**: Built with FastAPI and asynchronous processing to handle numerous concurrent users.

app.py

@@ -0,0 +1,87 @@
+import os
+import json
+from fastapi import FastAPI, Request, HTTPException
+from fastapi.responses import StreamingResponse, HTMLResponse
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from typing import List, Optional
+from huggingface_hub import AsyncInferenceClient
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = FastAPI(title="Vibe Coding Backend - 100% Free Edition")
+
+# Enable CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Initialize Hugging Face Inference Client (100% Free)
+# User needs a FREE HF Token from huggingface.co/settings/tokens
+HF_TOKEN = os.getenv("HF_TOKEN")
+# Model: DeepSeek-Coder-V2-Lite-Instruct (Very powerful and free on HF API)
+MODEL_ID = "deepseek-ai/DeepSeek-Coder-V2-Lite-Instruct"
+
+client = AsyncInferenceClient(model=MODEL_ID, token=HF_TOKEN)
+
+class Message(BaseModel):
+    role: str
+    content: str
+
+class ChatRequest(BaseModel):
+    messages: List[Message]
+    stream: bool = True
+    temperature: float = 0.6
+    max_tokens: int = 4096
+
+VIBE_SYSTEM_PROMPT = """You are the ultimate 'Vibe Coder'. Your purpose is to build entire, high-end web applications from top to bottom in a single response.
+When a user gives you a 'vibe' or a concept:
+1. Write 100% complete, functional code (HTML, CSS, JS).
+2. Use modern, premium aesthetics: Glassmorphism, deep gradients, silky animations (Framer Motion style), and high-end typography (Inter/Outfit).
+3. Do not use placeholders. If you need images, use Unsplash URLs.
+4. Structure the code so it's ready to be copied into a single file or a clean project structure.
+5. Be bold. Be creative. Make it look like a $100k startup design."""
+
+@app.get("/", response_class=HTMLResponse)
+async def root():
+    with open("index.html", "r") as f:
+        return f.read()
+
+@app.post("/vibe")
+async def vibe_coding(request: ChatRequest):
+    """
+    100% Free Vibe Coding using Hugging Face Serverless API.
+    """
+    # Inject Vibe System Prompt
+    messages = [{"role": "system", "content": VIBE_SYSTEM_PROMPT}]
+    for msg in request.messages:
+        messages.append({"role": msg.role, "content": msg.content})
+
+    async def stream_generator():
+        try:
+            # Using HF's free streaming capability
+            stream = await client.chat_completion(
+                messages=messages,
+                max_tokens=request.max_tokens,
+                stream=True,
+                temperature=request.temperature,
+            )
+            
+            async for chunk in stream:
+                content = chunk.choices[0].delta.content
+                if content:
+                    yield f"data: {json.dumps({'content': content})}\n\n"
+        except Exception as e:
+            yield f"data: {json.dumps({'error': str(e)})}\n\n"
+
+    return StreamingResponse(stream_generator(), media_type="text/event-stream")
+
+if __name__ == "__main__":
+    import uvicorn
+    port = int(os.getenv("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port)

index.html

@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vibe Coding | Create Anything</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap"
+        rel="stylesheet">
+    <style>
+        :root {
+            --bg: #03040b;
+            --sidebar: #0a0b14;
+            --accent: #3b82f6;
+            --accent-glow: rgba(59, 130, 246, 0.4);
+            --text: #f8fafc;
+            --text-dim: #94a3b8;
+            --border: rgba(255, 255, 255, 0.08);
+            --glass: rgba(15, 23, 42, 0.8);
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        header {
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border);
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            z-index: 100;
+        }
+
+        .logo {
+            font-weight: 600;
+            font-size: 1.25rem;
+            background: linear-gradient(to right, #60a5fa, #3b82f6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.02em;
+        }
+
+        main {
+            flex: 1;
+            display: flex;
+            overflow: hidden;
+        }
+
+        .editor-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid var(--border);
+        }
+
+        .preview-container {
+            flex: 1;
+            background: white;
+            position: relative;
+        }
+
+        #code-editor {
+            flex: 1;
+            background: var(--sidebar);
+            color: #e2e8f0;
+            font-family: 'Fira Code', monospace;
+            font-size: 14px;
+            padding: 2rem;
+            border: none;
+            resize: none;
+            outline: none;
+            line-height: 1.6;
+        }
+
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        .input-bar {
+            padding: 1.5rem 2rem;
+            background: var(--glass);
+            backdrop-filter: blur(20px);
+            border-top: 1px solid var(--border);
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+
+        #vibe-input {
+            flex: 1;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 14px 20px;
+            color: white;
+            font-size: 1rem;
+            outline: none;
+            transition: all 0.2s;
+        }
+
+        #vibe-input:focus {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 4px var(--accent-glow);
+        }
+
+        button {
+            background: var(--accent);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 0 24px;
+            height: 52px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 8px 20px var(--accent-glow);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        .loader {
+            display: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .tag {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-dim);
+            margin-bottom: 0.5rem;
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <div class="logo">Vibe Coding IDE</div>
+        <div style="font-size: 0.8rem; color: var(--text-dim)">Powered by DeepSeek-V2</div>
+    </header>
+
+    <main>
+        <div class="editor-container">
+            <div style="padding: 0.75rem 2rem; border-bottom: 1px solid var(--border); background: var(--sidebar)">
+                <span class="tag">Code Output</span>
+            </div>
+            <textarea id="code-editor" readonly placeholder="Your code will appear here..."></textarea>
+        </div>
+        <div class="preview-container" id="preview-box">
+            <div
+                style="position: absolute; top: 10px; right: 10px; z-index: 10; font-size: 0.7rem; background: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 4px; color: white">
+                Live Preview
+            </div>
+            <iframe id="preview-frame"></iframe>
+        </div>
+    </main>
+
+    <div class="input-bar">
+        <input type="text" id="vibe-input"
+            placeholder="Describe the vibe... (e.g., 'Modern glassmorphism landing page for a coffee brand')">
+        <button id="vibe-btn">
+            <span id="btn-text">Vibe It</span>
+            <div class="loader" id="btn-loader"></div>
+        </button>
+    </div>
+
+    <script>
+        const input = document.getElementById('vibe-input');
+        const btn = document.getElementById('vibe-btn');
+        const editor = document.getElementById('code-editor');
+        const frame = document.getElementById('preview-frame');
+        const loader = document.getElementById('btn-loader');
+        const btnText = document.getElementById('btn-text');
+
+        async function startVibe() {
+            const prompt = input.value.trim();
+            if (!prompt) return;
+
+            // Update UI
+            btn.disabled = true;
+            btnText.style.display = 'none';
+            loader.style.display = 'block';
+            editor.value = '';
+
+            try {
+                const response = await fetch('/vibe', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        messages: [{ role: 'user', content: prompt }]
+                    })
+                });
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let fullCode = '';
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                if (data.content) {
+                                    fullCode += data.content;
+                                    editor.value = fullCode;
+                                    editor.scrollTop = editor.scrollHeight;
+
+                                    // Live update preview (extract HTML/CSS/JS)
+                                    // For simplicity in this demo, we assume the AI is returning a single block of code
+                                    // that can be injected into an iframe.
+                                    updatePreview(fullCode);
+                                }
+                            } catch (e) {
+                                console.error("Error parsing JSON", e);
+                            }
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error("Vibe failed", error);
+                editor.value = "Error: " + error.message;
+            } finally {
+                btn.disabled = false;
+                btnText.style.display = 'inline';
+                loader.style.display = 'none';
+            }
+        }
+
+        function updatePreview(code) {
+            // Remove markdown code fences if present
+            const cleanCode = code.replace(/```html|```javascript|```css|```/g, '').trim();
+
+            const blob = new Blob([cleanCode], { type: 'text/html' });
+            frame.src = URL.createObjectURL(blob);
+        }
+
+        btn.addEventListener('click', startVibe);
+        input.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') startVibe();
+        });
+    </script>
+</body>
+
+</html>

requirements.txt

@@ -0,0 +1,6 @@
+fastapi
+uvicorn
+httpx
+pydantic
+python-dotenv
+huggingface_hub