next js ui

Dockerfile

@@ -1,14 +1,24 @@
 FROM ubuntu:22.04
 
-RUN apt-get update && apt-get install -y curl zstd && \
-    curl -fsSL https://ollama.com/install.sh | sh
+RUN apt-get update && apt-get install -y curl zstd ca-certificates gnupg \
+    && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
+    && apt-get install -y nodejs \
+    && curl -fsSL https://ollama.com/install.sh | sh \
+    && apt-get clean && rm -rf /var/lib/apt/lists/*
 
-ENV OLLAMA_HOST=0.0.0.0:7860
+ENV OLLAMA_HOST=0.0.0.0:11434
 ENV OLLAMA_ORIGINS=*
 ENV HOME=/tmp
 ENV OLLAMA_MODELS=/tmp/.ollama/models
 
-# This is the line that failed because the file was missing
+WORKDIR /app
+
+COPY package.json tsconfig.json next.config.js ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
 COPY entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 

entrypoint.sh

@@ -1,26 +1,22 @@
 #!/bin/bash
 
-echo "🚀 Starting Ollama server..."
+echo "🚀 Starting Ollama server on :11434..."
 ollama serve &
 
-# Wait for Ollama to be ready
-echo "⏳ Waiting for Ollama to start..."
 sleep 8
 
-# Optional: preload a default model (DO NOT force remove anything)
 DEFAULT_MODEL="qwen2.5:1.5b"
 
-echo "📦 Checking if default model exists..."
+echo "📦 Checking model..."
 if ! ollama list | grep -q "$DEFAULT_MODEL"; then
-  echo "⬇️ Pulling default model: $DEFAULT_MODEL"
+  echo "⬇️ Pulling: $DEFAULT_MODEL"
   ollama pull $DEFAULT_MODEL
 else
-  echo "✅ Model already exists: $DEFAULT_MODEL"
+  echo "✅ Model ready: $DEFAULT_MODEL"
 fi
 
-# Start your UI (Gradio app)
-echo "🎨 Starting UI..."
-python app.py
+echo "🎨 Starting Next.js UI on :7860..."
+cd /app
+npm start
 
-# Keep container alive
-wait
+wait

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "ollama-ui",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev -p 7860 -H 0.0.0.0",
+    "build": "next build",
+    "start": "next start -p 7860 -H 0.0.0.0"
+  },
+  "dependencies": {
+    "next": "14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.0",
+    "@types/react": "^18.3.0",
+    "typescript": "^5.4.0"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from "next/app"
+import "../styles/globals.css"
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

pages/api/generate.ts

@@ -0,0 +1,29 @@
+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 { model, prompt } = req.body
+
+  try {
+    const ollamaRes = await fetch("http://localhost:11434/api/generate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model,
+        prompt,
+        stream: false,
+      }),
+    })
+
+    const data = await ollamaRes.json()
+    res.status(200).json(data)
+  } catch (err) {
+    res.status(500).json({ error: "Failed to connect to Ollama" })
+  }
+}

pages/index.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react"
+
+const models = [
+  "qwen2.5:1.5b",
+  "mistral",
+  "tinyllama",
+  "hf.co/bartowski/Llama-3.2-1B-Instruct-GGUF",
+]
+
+export default function Home() {
+  const [model, setModel] = useState(models[0])
+  const [prompt, setPrompt] = useState("")
+  const [response, setResponse] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  const generate = async () => {
+    if (!prompt.trim()) return
+    setLoading(true)
+    setResponse("")
+
+    try {
+      const res = await fetch("/api/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model, prompt }),
+      })
+      const data = await res.json()
+      setResponse(data.response || data.error || "No response")
+    } catch {
+      setResponse("❌ Failed to connect to server")
+    }
+
+    setLoading(false)
+  }
+
+  return (
+    <main className="container">
+      <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..."}
+        </div>
+      </div>
+    </main>
+  )
+}

styles/globals.css

@@ -0,0 +1,101 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #0a0a0a;
+  color: #e5e5e5;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 48px 24px;
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 4px;
+}
+
+.subtitle {
+  color: #888;
+  font-size: 14px;
+  margin-bottom: 32px;
+}
+
+.field {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  font-size: 13px;
+  color: #999;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+select,
+textarea {
+  width: 100%;
+  background: #141414;
+  color: #e5e5e5;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 15px;
+  outline: none;
+  transition: border 0.2s;
+}
+
+select:focus,
+textarea:focus {
+  border-color: #555;
+}
+
+textarea {
+  resize: vertical;
+  font-family: inherit;
+}
+
+button {
+  background: #fff;
+  color: #0a0a0a;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 24px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+button:hover {
+  opacity: 0.85;
+}
+
+button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.response {
+  margin-top: 28px;
+}
+
+.response-box {
+  background: #111;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  padding: 16px;
+  min-height: 120px;
+  font-size: 15px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  color: #ccc;
+}

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "es2017"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}