Initial commit: NexusOS - local AI assistant platform

interface/web/src/Models.jsx

@@ -0,0 +1,278 @@
+import { useCallback, useEffect, useState } from "react";
+import { API_BASE } from "./config";
+
+export function Models({ onPullStateChange }) {
+  const [models, setModels] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [pulling, setPulling] = useState(false);
+  const [modelName, setModelName] = useState("");
+  const [pullProgress, setPullProgress] = useState("");
+
+  const checkOllamaStatus = useCallback(async () => {
+    try {
+      const response = await fetch(`${API_BASE}/ollama/status`);
+      const data = await response.json();
+      return data.status === "running";
+    } catch {
+      return false;
+    }
+  }, []);
+
+  const loadModels = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const isRunning = await checkOllamaStatus();
+      if (!isRunning) {
+        setError("Ollama service is not running");
+        setModels([]);
+        return;
+      }
+      const response = await fetch(`${API_BASE}/models/details`);
+      if (!response.ok) throw new Error("Failed to fetch models");
+      const data = await response.json();
+      // Embedding models (nomic-embed-text) are infrastructure — hide them.
+      setModels((data.models || []).filter((m) => !m.name.toLowerCase().includes("embed")));
+    } catch (err) {
+      setError(`Error loading models: ${err.message}`);
+      setModels([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [checkOllamaStatus]);
+
+  const pullModel = async () => {
+    if (!modelName.trim()) {
+      setError("Please enter a model name");
+      return;
+    }
+
+    setPulling(true);
+    onPullStateChange?.(true);
+    setError("");
+    setPullProgress("");
+
+    try {
+      const response = await fetch(`${API_BASE}/models/pull`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: modelName.trim() }),
+      });
+
+      if (!response.ok) throw new Error("Failed to pull model");
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+
+      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.trim()) {
+            try {
+              const json = JSON.parse(line);
+              if (json.error) {
+                setError(`Pull error: ${json.error}`);
+              } else if (json.status) {
+                setPullProgress(json.completed && json.total
+                  ? `${json.status} — ${Math.round((json.completed / json.total) * 100)}%`
+                  : json.status
+                );
+              }
+            } catch {
+              // ignore incomplete JSON lines
+            }
+          }
+        }
+      }
+
+      setModelName("");
+      setPullProgress("");
+      await loadModels();
+    } catch (err) {
+      setError(`Error pulling model: ${err.message}`);
+    } finally {
+      setPulling(false);
+      onPullStateChange?.(false);
+    }
+  };
+
+  const deleteModel = async (modelId) => {
+    if (!confirm(`Are you sure you want to delete ${modelId}?`)) return;
+
+    setError("");
+    try {
+      const response = await fetch(`${API_BASE}/models/${encodeURIComponent(modelId)}`, {
+        method: "DELETE",
+      });
+      if (!response.ok) {
+        const text = await response.text().catch(() => "");
+        throw new Error(text || response.statusText);
+      }
+      await loadModels();
+    } catch (err) {
+      setError(`Error deleting model: ${err.message}`);
+    }
+  };
+
+  useEffect(() => {
+    loadModels();
+    const interval = setInterval(loadModels, 30000);
+
+    return () => clearInterval(interval);
+  }, [loadModels]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", flexGrow: 1 }}>
+      {error && (
+        <div style={{
+          padding: "0.75rem 1rem",
+          background: "#3d2d2d",
+          border: "1px solid #ff6b6b",
+          borderRadius: "8px",
+          color: "#ff8888",
+          marginBottom: "1rem",
+          fontSize: "0.9rem"
+        }}>
+          {error}
+        </div>
+      )}
+
+      <div style={{
+        flexGrow: 1,
+        background: "#161616",
+        border: "1px solid #333",
+        borderRadius: "12px",
+        padding: "1rem",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      }}>
+        {/* Pull Model Section */}
+        <div style={{ marginBottom: "1.5rem", paddingBottom: "1rem", borderBottom: "1px solid #333" }}>
+          <h3 style={{ margin: "0 0 0.75rem 0", fontSize: "0.95rem", color: "#bbb" }}>Pull Model from Registry</h3>
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            <input
+              type="text"
+              placeholder="e.g., llama3, mistral, gemma"
+              value={modelName}
+              onChange={(e) => setModelName(e.target.value)}
+              onKeyPress={(e) => e.key === "Enter" && !pulling && pullModel()}
+              disabled={pulling}
+              style={{
+                flex: 1,
+                padding: "0.6rem 0.75rem",
+                background: "#0a0a0a",
+                color: "#eee",
+                border: "1px solid #333",
+                borderRadius: "6px",
+                fontSize: "0.9rem"
+              }}
+            />
+            <button
+              onClick={pullModel}
+              disabled={pulling}
+              style={{
+                padding: "0.6rem 1.25rem",
+                background: pulling ? "#666" : "#28a745",
+                color: "#fff",
+                border: "none",
+                borderRadius: "6px",
+                cursor: pulling ? "not-allowed" : "pointer",
+                fontSize: "0.9rem",
+                whiteSpace: "nowrap"
+              }}
+            >
+              {pulling ? "Pulling..." : "Pull"}
+            </button>
+            <button
+              onClick={loadModels}
+              disabled={loading}
+              style={{
+                padding: "0.6rem 1.25rem",
+                background: "#007acc",
+                color: "#fff",
+                border: "none",
+                borderRadius: "6px",
+                cursor: loading ? "not-allowed" : "pointer",
+                opacity: loading ? 0.6 : 1,
+                fontSize: "0.9rem",
+                whiteSpace: "nowrap"
+              }}
+            >
+              {loading ? "Refreshing..." : "Refresh"}
+            </button>
+          </div>
+          {pullProgress && (
+            <div style={{ marginTop: "0.75rem", fontSize: "0.85rem", color: "#999" }}>
+              {pullProgress}
+            </div>
+          )}
+        </div>
+
+        {/* Local Models List */}
+        <div style={{ flexGrow: 1, overflowY: "auto", paddingRight: "0.5rem" }}>
+          <h3 style={{ margin: "0 0 1rem 0", fontSize: "0.95rem", color: "#bbb" }}>
+            Available Models ({models.length})
+          </h3>
+          {models.length === 0 ? (
+            <div style={{ padding: "2rem", textAlign: "center", color: "#666" }}>
+              {loading ? "Loading models..." : "No models available. Pull a model to get started."}
+            </div>
+          ) : (
+            <div style={{ display: "grid", gap: "0.75rem" }}>
+              {models.map((model) => (
+                <div
+                  key={model.name}
+                  style={{
+                    padding: "0.9rem",
+                    background: "#1b1b1b",
+                    borderRadius: "8px",
+                    border: "1px solid #2a2a2a",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                  }}
+                >
+                  <div>
+                    <div style={{ fontWeight: "500", marginBottom: "0.3rem", color: "#ddd" }}>
+                      {model.name}
+                    </div>
+                    <div style={{ fontSize: "0.85rem", color: "#aaa" }}>
+                      {(model.size / (1024 * 1024 * 1024)).toFixed(2)} GB
+                    </div>
+                    {model.modified_at && (
+                      <div style={{ fontSize: "0.85rem", color: "#888" }}>
+                        Modified: {new Date(model.modified_at).toLocaleDateString()}
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => deleteModel(model.name)}
+                    style={{
+                      padding: "0.5rem 1rem",
+                      background: "#d63031",
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: "6px",
+                      cursor: "pointer",
+                      fontSize: "0.85rem",
+                      whiteSpace: "nowrap"
+                    }}
+                  >
+                    Delete
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}