Add model management (pull + delete)

pages/api/models.ts

@@ -0,0 +1,44 @@
+import type { NextApiRequest, NextApiResponse } from "next"
+
+const OLLAMA = "http://localhost:11434"
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  // GET → list all models
+  if (req.method === "GET") {
+    try {
+      const r = await fetch(`${OLLAMA}/api/tags`)
+      const data = await r.json()
+      res.status(200).json(data)
+    } catch {
+      res.status(500).json({ error: "Failed to fetch models" })
+    }
+    return
+  }
+
+  // DELETE → remove a model
+  if (req.method === "DELETE") {
+    const { name } = req.body
+    try {
+      const r = await fetch(`${OLLAMA}/api/delete`, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      })
+
+      if (r.ok) {
+        res.status(200).json({ success: true })
+      } else {
+        const err = await r.text()
+        res.status(400).json({ error: err })
+      }
+    } catch {
+      res.status(500).json({ error: "Failed to delete model" })
+    }
+    return
+  }
+
+  res.status(405).json({ error: "Method not allowed" })
+}

pages/api/pull.ts

@@ -0,0 +1,33 @@
+import type { NextApiRequest, NextApiResponse } from "next"
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ error: "Method not allowed" })
+  }
+
+  const { name } = req.body
+
+  if (!name || !name.trim()) {
+    return res.status(400).json({ error: "Model name required" })
+  }
+
+  try {
+    const r = await fetch("http://localhost:11434/api/pull", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, stream: false }),
+    })
+
+    if (r.ok) {
+      res.status(200).json({ success: true, model: name })
+    } else {
+      const err = await r.text()
+      res.status(400).json({ error: err })
+    }
+  } catch {
+    res.status(500).json({ error: "Failed to pull model" })
+  }
+}

pages/index.tsx

@@ -1,20 +1,104 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
 
-const models = [
-  "qwen2.5:1.5b",
-  "mistral",
-  "tinyllama",
-  "hf.co/bartowski/Llama-3.2-1B-Instruct-GGUF",
-]
+interface OllamaModel {
+  name: string
+  size: number
+}
 
 export default function Home() {
-  const [model, setModel] = useState(models[0])
+  // Model management
+  const [installedModels, setInstalledModels] = useState<OllamaModel[]>([])
+  const [newModel, setNewModel] = useState("")
+  const [pulling, setPulling] = useState(false)
+  const [pullStatus, setPullStatus] = useState("")
+  const [deleting, setDeleting] = useState("")
+
+  // Generation
+  const [model, setModel] = useState("")
   const [prompt, setPrompt] = useState("")
   const [response, setResponse] = useState("")
   const [loading, setLoading] = useState(false)
 
+  // Fetch installed models
+  const fetchModels = async () => {
+    try {
+      const res = await fetch("/api/models")
+      const data = await res.json()
+      const models = data.models || []
+      setInstalledModels(models)
+      if (models.length > 0 && !model) {
+        setModel(models[0].name)
+      }
+    } catch {
+      console.error("Failed to fetch models")
+    }
+  }
+
+  useEffect(() => {
+    fetchModels()
+  }, [])
+
+  // Pull new model
+  const pullModel = async () => {
+    if (!newModel.trim()) return
+    setPulling(true)
+    setPullStatus(`⬇️ Pulling ${newModel}... this may take a while`)
+
+    try {
+      const res = await fetch("/api/pull", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newModel.trim() }),
+      })
+
+      if (res.ok) {
+        setPullStatus(`✅ ${newModel} pulled successfully!`)
+        setNewModel("")
+        await fetchModels()
+      } else {
+        const data = await res.json()
+        setPullStatus(`❌ ${data.error || "Failed to pull"}`)
+      }
+    } catch {
+      setPullStatus("❌ Failed to connect")
+    }
+
+    setPulling(false)
+    setTimeout(() => setPullStatus(""), 5000)
+  }
+
+  // Delete model
+  const deleteModel = async (name: string) => {
+    if (!confirm(`Delete ${name}?`)) return
+    setDeleting(name)
+
+    try {
+      const res = await fetch("/api/models", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      })
+
+      if (res.ok) {
+        await fetchModels()
+        if (model === name) setModel("")
+      }
+    } catch {
+      console.error("Failed to delete")
+    }
+
+    setDeleting("")
+  }
+
+  // Format size
+  const formatSize = (bytes: number) => {
+    const gb = bytes / 1e9
+    return gb >= 1 ? `${gb.toFixed(1)} GB` : `${(bytes / 1e6).toFixed(0)} MB`
+  }
+
+  // Generate
   const generate = async () => {
-    if (!prompt.trim()) return
+    if (!prompt.trim() || !model) return
     setLoading(true)
     setResponse("")
 
@@ -38,38 +122,92 @@ export default function Home() {
       <h1>⚡ Ollama UI</h1>
       <p className="subtitle">Self-hosted LLM on Hugging Face</p>
 
-      <div className="field">
-        <label>Model</label>
-        <select value={model} onChange={(e) => setModel(e.target.value)}>
-          {models.map((m) => (
-            <option key={m} value={m}>{m}</option>
-          ))}
-        </select>
-      </div>
-
-      <div className="field">
-        <label>Prompt</label>
-        <textarea
-          rows={5}
-          placeholder="Type your prompt here..."
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && e.metaKey) generate()
-          }}
-        />
-      </div>
-
-      <button onClick={generate} disabled={loading}>
-        {loading ? "⏳ Generating..." : "🚀 Generate"}
-      </button>
-
-      <div className="response">
-        <label>Response</label>
-        <div className="response-box">
-          {response || "Response will appear here..."}
+      {/* ── Model Management ── */}
+      <section className="section">
+        <h2>📦 Model Management</h2>
+
+        {/* Pull new model */}
+        <div className="pull-row">
+          <input
+            type="text"
+            placeholder="e.g. mistral, tinyllama, hf.co/user/repo"
+            value={newModel}
+            onChange={(e) => setNewModel(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") pullModel()
+            }}
+            disabled={pulling}
+          />
+          <button onClick={pullModel} disabled={pulling} className="btn-pull">
+            {pulling ? "Pulling..." : "⬇️ Pull"}
+          </button>
+        </div>
+
+        {pullStatus && <p className="status">{pullStatus}</p>}
+
+        {/* Installed models list */}
+        <div className="model-list">
+          {installedModels.length === 0 ? (
+            <p className="empty">No models installed yet</p>
+          ) : (
+            installedModels.map((m) => (
+              <div key={m.name} className="model-item">
+                <div className="model-info">
+                  <span className="model-name">{m.name}</span>
+                  <span className="model-size">{formatSize(m.size)}</span>
+                </div>
+                <button
+                  onClick={() => deleteModel(m.name)}
+                  disabled={deleting === m.name}
+                  className="btn-delete"
+                >
+                  {deleting === m.name ? "..." : "🗑️"}
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      </section>
+
+      {/* ── Generation ── */}
+      <section className="section">
+        <h2>💬 Generate</h2>
+
+        <div className="field">
+          <label>Model</label>
+          <select value={model} onChange={(e) => setModel(e.target.value)}>
+            {installedModels.map((m) => (
+              <option key={m.name} value={m.name}>
+                {m.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="field">
+          <label>Prompt</label>
+          <textarea
+            rows={5}
+            placeholder="Type your prompt here..."
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && e.metaKey) generate()
+            }}
+          />
+        </div>
+
+        <button onClick={generate} disabled={loading || !model}>
+          {loading ? "⏳ Generating..." : "🚀 Generate"}
+        </button>
+
+        <div className="response">
+          <label>Response</label>
+          <div className="response-box">
+            {response || "Response will appear here..."}
+          </div>
         </div>
-      </div>
+      </section>
     </main>
   )
 }

styles/globals.css

@@ -21,12 +21,28 @@ h1 {
   margin-bottom: 4px;
 }
 
+h2 {
+  font-size: 18px;
+  color: #ccc;
+  margin-bottom: 16px;
+}
+
 .subtitle {
   color: #888;
   font-size: 14px;
   margin-bottom: 32px;
 }
 
+/* Sections */
+.section {
+  background: #111;
+  border: 1px solid #1e1e1e;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+/* Fields */
 .field {
   margin-bottom: 20px;
 }
@@ -41,9 +57,10 @@ label {
 }
 
 select,
-textarea {
+textarea,
+input[type="text"] {
   width: 100%;
-  background: #141414;
+  background: #1a1a1a;
   color: #e5e5e5;
   border: 1px solid #2a2a2a;
   border-radius: 8px;
@@ -54,7 +71,8 @@ textarea {
 }
 
 select:focus,
-textarea:focus {
+textarea:focus,
+input[type="text"]:focus {
   border-color: #555;
 }
 
@@ -63,6 +81,7 @@ textarea {
   font-family: inherit;
 }
 
+/* Buttons */
 button {
   background: #fff;
   color: #0a0a0a;
@@ -84,12 +103,90 @@ button:disabled {
   cursor: not-allowed;
 }
 
+/* Pull row */
+.pull-row {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.pull-row input {
+  flex: 1;
+}
+
+.btn-pull {
+  white-space: nowrap;
+  padding: 12px 20px;
+  font-size: 14px;
+}
+
+.status {
+  font-size: 13px;
+  color: #aaa;
+  margin-bottom: 16px;
+}
+
+/* Model list */
+.model-list {
+  margin-top: 16px;
+}
+
+.model-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  background: #1a1a1a;
+  border: 1px solid #222;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.model-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.model-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: #e5e5e5;
+}
+
+.model-size {
+  font-size: 12px;
+  color: #666;
+}
+
+.btn-delete {
+  background: transparent;
+  color: #888;
+  padding: 6px 10px;
+  font-size: 16px;
+  border-radius: 6px;
+}
+
+.btn-delete:hover {
+  background: #2a1515;
+  color: #ff6b6b;
+  opacity: 1;
+}
+
+.empty {
+  color: #555;
+  font-size: 14px;
+  text-align: center;
+  padding: 20px;
+}
+
+/* Response */
 .response {
-  margin-top: 28px;
+  margin-top: 20px;
 }
 
 .response-box {
-  background: #111;
+  background: #141414;
   border: 1px solid #2a2a2a;
   border-radius: 8px;
   padding: 16px;