Upload 5 files

Dockerfile

@@ -0,0 +1,16 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system deps
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git curl && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,12 +1,33 @@
 ---
-title: Codette Ai
-emoji: 😻
+title: Codette AI Music Assistant
+emoji: 🎵
 colorFrom: gray
-colorTo: purple
+colorTo: gray
 sdk: docker
+app_port: 7860
 pinned: false
-license: mit
-short_description: '  Codette is not a chatbot. She is not a feature. She is AI'
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Codette AI — Music Production Assistant
+
+A LoRA fine-tuned **Llama 3.2-1B** model specialising in music theory,
+mixing, arrangement, and production guidance.
+
+## API
+
+The Space exposes an Ollama-compatible streaming endpoint:
+
+```
+POST /api/chat
+Content-Type: application/json
+
+{
+  "messages": [
+    {"role": "system", "content": "..."},
+    {"role": "user",   "content": "What key is this chord progression in?"}
+  ],
+  "stream": true
+}
+```
+
+Responses stream as newline-delimited JSON, identical to Ollama's `/api/chat`.

app.py

@@ -0,0 +1,146 @@
+"""
+Codette AI Space — FastAPI + streaming chat API
+Compatible with the Ollama /api/chat streaming format so the HTML widget
+needs only a URL change to work.
+
+Adapter files should live in ./adapter/ inside this Space repo.
+Base model: meta-llama/Llama-3.2-1B
+"""
+
+import json
+import asyncio
+import threading
+from pathlib import Path
+from typing import Iterator
+
+import torch
+from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse, HTMLResponse
+from peft import PeftModel
+from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
+
+# ── Config ───────────────────────────────────────────────────────────────────
+BASE_MODEL   = "meta-llama/Llama-3.2-1B"
+ADAPTER_PATH = Path(__file__).parent / "adapter"
+DEVICE       = "cuda" if torch.cuda.is_available() else "cpu"
+
+# ── App ───────────────────────────────────────────────────────────────────────
+app = FastAPI(title="Codette AI")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],   # Squarespace domain — keep open so the widget works
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ── Model (loaded once at startup) ────────────────────────────────────────────
+print(f"Loading tokenizer from {ADAPTER_PATH} …")
+tokenizer = AutoTokenizer.from_pretrained(str(ADAPTER_PATH))
+if tokenizer.pad_token is None:
+    tokenizer.pad_token = tokenizer.eos_token
+
+print(f"Loading base model {BASE_MODEL} …")
+base = AutoModelForCausalLM.from_pretrained(
+    BASE_MODEL,
+    torch_dtype=torch.float16 if DEVICE == "cuda" else torch.float32,
+    device_map="auto",
+    low_cpu_mem_usage=True,
+)
+
+print(f"Loading LoRA adapter from {ADAPTER_PATH} …")
+model = PeftModel.from_pretrained(base, str(ADAPTER_PATH))
+
+print("Merging LoRA weights into base model …")
+model = model.merge_and_unload()   # ← this is the actual merge step
+model.eval()
+print(f"✅ Model ready on {DEVICE}")
+
+
+# ── Helpers ───────────────────────────────────────────────────────────────────
+def build_prompt(messages: list[dict]) -> str:
+    """Convert OpenAI-style messages to a simple Llama-3.2 instruct prompt."""
+    parts = []
+    for m in messages:
+        role = m.get("role", "user")
+        content = m.get("content", "")
+        if role == "system":
+            parts.append(f"<|begin_of_text|><|start_header_id|>system<|end_header_id|>\n{content}<|eot_id|>")
+        elif role == "user":
+            parts.append(f"<|start_header_id|>user<|end_header_id|>\n{content}<|eot_id|>")
+        elif role == "assistant":
+            parts.append(f"<|start_header_id|>assistant<|end_header_id|>\n{content}<|eot_id|>")
+    parts.append("<|start_header_id|>assistant<|end_header_id|>\n")
+    return "".join(parts)
+
+
+def stream_tokens(messages: list[dict], max_new_tokens: int = 512) -> Iterator[str]:
+    prompt = build_prompt(messages)
+    inputs = tokenizer(prompt, return_tensors="pt").to(DEVICE)
+
+    streamer = TextIteratorStreamer(
+        tokenizer, skip_prompt=True, skip_special_tokens=True
+    )
+
+    gen_kwargs = dict(
+        **inputs,
+        max_new_tokens=max_new_tokens,
+        do_sample=True,
+        temperature=0.7,
+        top_p=0.9,
+        streamer=streamer,
+    )
+
+    thread = threading.Thread(target=model.generate, kwargs=gen_kwargs)
+    thread.start()
+
+    for token in streamer:
+        yield token
+
+    thread.join()
+
+
+# ── Routes ────────────────────────────────────────────────────────────────────
+@app.get("/", response_class=HTMLResponse)
+async def root():
+    return "<h2>Codette AI is running ✅</h2><p>POST /api/chat to chat.</p>"
+
+
+@app.post("/api/chat")
+async def chat(request: Request):
+    body = await request.json()
+    messages = body.get("messages", [])
+    stream = body.get("stream", True)
+
+    if not stream:
+        # Non-streaming — collect everything first
+        full = "".join(stream_tokens(messages))
+        return {
+            "message": {"role": "assistant", "content": full},
+            "done": True,
+        }
+
+    # Streaming — mimic Ollama's NDJSON format exactly
+    async def event_stream():
+        full = ""
+        for token in stream_tokens(messages):
+            full += token
+            chunk = json.dumps({
+                "message": {"role": "assistant", "content": token},
+                "done": False,
+            })
+            yield chunk + "\n"
+            await asyncio.sleep(0)   # yield control to event loop
+
+        # Final message with done=true
+        yield json.dumps({
+            "message": {"role": "assistant", "content": ""},
+            "done": True,
+        }) + "\n"
+
+    return StreamingResponse(
+        event_stream(),
+        media_type="application/x-ndjson",
+        headers={"X-Accel-Buffering": "no"},
+    )

index.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Codette Chat</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital@0;1&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
+  <style>
+    /* ── Reset / Base ── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    /* ── Variables ── */
+    :root {
+      --bg:        #0b0c10;
+      --surface:   #13141a;
+      --border:    #1f2130;
+      --accent:    #c8f078;   /* neon lime — studio meter green */
+      --accent2:   #78d4f0;   /* cool cyan */
+      --text:      #e8eaf0;
+      --muted:     #5a5f78;
+      --user-bg:   #1a1f35;
+      --bot-bg:    #111318;
+      --radius:    14px;
+      --font-mono: 'Space Mono', monospace;
+      --font-sans: 'DM Sans', sans-serif;
+    }
+
+    body {
+      background: var(--bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      font-family: var(--font-sans);
+    }
+
+    /* ── Widget Shell ── */
+    #hc-chat {
+      width: 100%;
+      max-width: 680px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow:
+        0 0 0 1px #ffffff08 inset,
+        0 32px 80px #00000060;
+    }
+
+    /* ── Header ── */
+    #hc-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+      background: linear-gradient(135deg, #0f1118 0%, #141825 100%);
+    }
+
+    .hc-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      flex-shrink: 0;
+    }
+
+    .hc-title {
+      font-weight: 600;
+      color: var(--text);
+      font-size: 15px;
+      letter-spacing: 0.01em;
+    }
+
+    .hc-subtitle {
+      font-family: var(--font-mono);
+      font-size: 10px;
+      color: var(--accent);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      margin-top: 2px;
+    }
+
+    /* LED meter dots */
+    .hc-dots {
+      margin-left: auto;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+    .hc-dot {
+      width: 7px; height: 7px; border-radius: 50%;
+      background: var(--border);
+    }
+    .hc-dot.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 1.8s ease-in-out infinite; }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+
+    /* ── Log ── */
+    #hc-log {
+      flex: 1;
+      min-height: 320px;
+      max-height: 400px;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border) transparent;
+    }
+
+    /* Bubbles */
+    .hc-row {
+      display: flex;
+      flex-direction: column;
+    }
+    .hc-row.user { align-items: flex-end; }
+    .hc-row.bot  { align-items: flex-start; }
+
+    .hc-label {
+      font-family: var(--font-mono);
+      font-size: 9px;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--muted);
+      margin-bottom: 5px;
+      padding: 0 4px;
+    }
+
+    .hc-bubble {
+      max-width: 82%;
+      padding: 11px 15px;
+      border-radius: var(--radius);
+      font-size: 14px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      border: 1px solid var(--border);
+    }
+
+    .hc-row.user .hc-bubble {
+      background: var(--user-bg);
+      color: var(--text);
+      border-color: #2a3050;
+      border-bottom-right-radius: 4px;
+    }
+
+    .hc-row.bot .hc-bubble {
+      background: var(--bot-bg);
+      color: var(--text);
+      border-color: var(--border);
+      border-bottom-left-radius: 4px;
+    }
+
+    /* cursor blink */
+    .hc-cursor::after {
+      content: '▋';
+      color: var(--accent);
+      animation: blink .7s step-end infinite;
+    }
+    @keyframes blink { 50%{opacity:0} }
+
+    /* ── Input bar ── */
+    #hc-bar {
+      display: flex;
+      gap: 10px;
+      padding: 14px 16px;
+      border-top: 1px solid var(--border);
+      background: var(--surface);
+    }
+
+    #hc-input {
+      flex: 1;
+      padding: 11px 14px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      color: var(--text);
+      font-family: var(--font-sans);
+      font-size: 14px;
+      outline: none;
+      transition: border-color .2s;
+    }
+    #hc-input::placeholder { color: var(--muted); }
+    #hc-input:focus { border-color: #2e3555; }
+
+    #hc-send {
+      padding: 11px 18px;
+      background: var(--accent);
+      color: #0b0c10;
+      border: none;
+      border-radius: 10px;
+      font-family: var(--font-sans);
+      font-weight: 600;
+      font-size: 13px;
+      cursor: pointer;
+      transition: opacity .15s, transform .1s;
+      letter-spacing: 0.02em;
+    }
+    #hc-send:hover  { opacity: .88; }
+    #hc-send:active { transform: scale(.97); }
+    #hc-send:disabled { opacity: .35; cursor: not-allowed; }
+
+    /* ── Footer ── */
+    #hc-footer {
+      padding: 10px 20px 14px;
+      font-family: var(--font-mono);
+      font-size: 10px;
+      color: var(--muted);
+      letter-spacing: 0.05em;
+    }
+  </style>
+</head>
+<body>
+
+<div id="hc-chat">
+  <!-- Header -->
+  <div id="hc-header">
+    <div class="hc-avatar">🎵</div>
+    <div>
+      <div class="hc-title">Codette</div>
+      <div class="hc-subtitle">Music Production AI</div>
+    </div>
+    <div class="hc-dots">
+      <div class="hc-dot on" style="animation-delay:.0s"></div>
+      <div class="hc-dot on" style="animation-delay:.3s"></div>
+      <div class="hc-dot on" style="animation-delay:.6s"></div>
+      <div class="hc-dot"></div>
+    </div>
+  </div>
+
+  <!-- Message log -->
+  <div id="hc-log"></div>
+
+  <!-- Input -->
+  <div id="hc-bar">
+    <input id="hc-input" type="text" placeholder="Ask about chords, mixing, arrangement…" autocomplete="off" />
+    <button id="hc-send">Send</button>
+  </div>
+
+  <!-- Footer -->
+  <div id="hc-footer">
+    CODETTE-LLAMA · LLAMA 3.2-1B · NO CHAT HISTORY SAVED
+  </div>
+</div>
+
+<script>
+(() => {
+  // ── CHANGE THIS to your HF Space URL once deployed ──
+  // Format: https://raiff1982-codette-ai.hf.space
+  const API_BASE = "https://raiff1982-codette-ai.hf.space";
+
+  const log     = document.getElementById("hc-log");
+  const input   = document.getElementById("hc-input");
+  const sendBtn = document.getElementById("hc-send");
+
+  const messages = [
+    {
+      role: "system",
+      content:
+        "You are Codette, an AI music production assistant with expertise in " +
+        "music theory, mixing, composition, harmonic progressions, genre analysis, " +
+        "ear training, and arrangement. You assist musicians and producers with " +
+        "creative and technical guidance. Be concise, practical, and musically informed."
+    }
+  ];
+
+  function addBubble(role, text = "") {
+    const row = document.createElement("div");
+    row.className = `hc-row ${role === "user" ? "user" : "bot"}`;
+
+    const label = document.createElement("div");
+    label.className = "hc-label";
+    label.textContent = role === "user" ? "You" : "Codette";
+
+    const bubble = document.createElement("div");
+    bubble.className = "hc-bubble";
+    if (role === "assistant" && !text) bubble.classList.add("hc-cursor");
+    bubble.textContent = text;
+
+    row.appendChild(label);
+    row.appendChild(bubble);
+    log.appendChild(row);
+    log.scrollTop = log.scrollHeight;
+    return bubble;
+  }
+
+  async function streamReply() {
+    const text = input.value.trim();
+    if (!text) return;
+
+    input.value = "";
+    messages.push({ role: "user", content: text });
+    addBubble("user", text);
+
+    const bubble = addBubble("assistant", "");
+    sendBtn.disabled = true;
+    input.disabled   = true;
+
+    try {
+      const resp = await fetch(`${API_BASE}/api/chat`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ messages, stream: true })
+      });
+
+      if (!resp.ok) {
+        bubble.textContent = `Error ${resp.status}: ${await resp.text()}`;
+        bubble.classList.remove("hc-cursor");
+        return;
+      }
+
+      const reader  = resp.body.getReader();
+      const decoder = new TextDecoder();
+      let full = "", buffer = "";
+
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop();
+
+        for (const line of lines) {
+          if (!line.trim()) continue;
+          try {
+            const chunk = JSON.parse(line);
+            const token = chunk?.message?.content ?? "";
+            full += token;
+            bubble.textContent = full || "";
+            bubble.classList.add("hc-cursor");
+            log.scrollTop = log.scrollHeight;
+            if (chunk.done) {
+              messages.push({ role: "assistant", content: full });
+              bubble.classList.remove("hc-cursor");
+            }
+          } catch { /* skip malformed */ }
+        }
+      }
+
+      bubble.classList.remove("hc-cursor");
+      if (!full) bubble.textContent = "(no response)";
+
+    } catch (err) {
+      bubble.classList.remove("hc-cursor");
+      bubble.textContent = err.message.includes("fetch")
+        ? "⚠️ Cannot reach Codette server. The Space may be starting up — try again in 30 seconds."
+        : `Error: ${err.message}`;
+    } finally {
+      sendBtn.disabled = false;
+      input.disabled   = false;
+      input.focus();
+    }
+  }
+
+  sendBtn.addEventListener("click", streamReply);
+  input.addEventListener("keydown", e => {
+    if (e.key === "Enter" && !e.shiftKey) streamReply();
+  });
+})();
+</script>
+
+</body>
+</html>

requirements.txt

@@ -0,0 +1,7 @@
+fastapi>=0.110.0
+uvicorn>=0.29.0
+peft>=0.10.0
+transformers>=4.40.0
+accelerate>=0.29.0
+torch>=2.2.0
+safetensors>=0.4.3