ARCH.AI_SPACE

Sleeping

App Files Files Community

FadeClip commited on Oct 1

Commit

93c0ec9

1 Parent(s): 97f7b3d

Add API key authentication and tech specifications document

Browse files

Files changed (7) hide show

.gitignore +1 -0
Dockerfile +2 -0
chat.html +8 -0
main.py +19 -2
static/script.js +23 -1
static/style.css +35 -0
tech_spec.md +181 -0

.gitignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ "__pycache__/"

Dockerfile CHANGED Viewed

@@ -8,6 +8,8 @@ ENV OLLAMA_MODEL=qwen3:4b
 # --- ENVIRONMENT VARIABLES ---
 ENV OLLAMA_HOST=0.0.0.0
 ENV OLLAMA_ORIGINS='*'
 # 1. Install Python and PIP
 RUN apt-get update && apt-get install -y python3 python3-pip curl

 # --- ENVIRONMENT VARIABLES ---
 ENV OLLAMA_HOST=0.0.0.0
 ENV OLLAMA_ORIGINS='*'
+# Optional: Set your own API key as environment variable, otherwise one will be auto-generated
+# ENV OLLAMA_API_KEY=your_secure_api_key_here
 # 1. Install Python and PIP
 RUN apt-get update && apt-get install -y python3 python3-pip curl

chat.html CHANGED Viewed

@@ -8,6 +8,14 @@
 </head>
 <body>
     <div id="chat-container">
         <div id="chat-window">
             <ul id="message-list"></ul>
         </div>

 </head>
 <body>
     <div id="chat-container">
+        <div id="header">
+            <h1>Ollama Chat</h1>
+            <div id="api-key-section">
+                <label for="api-key-input">API Key:</label>
+                <input type="password" id="api-key-input" placeholder="Enter API key">
+                <button id="save-api-key">Save</button>
+            </div>
+        </div>
         <div id="chat-window">
             <ul id="message-list"></ul>
         </div>

main.py CHANGED Viewed

@@ -1,16 +1,33 @@
 import requests
-from fastapi import FastAPI, Request, HTTPException
 from fastapi.responses import FileResponse, RedirectResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 OLLAMA_API_URL = "http://localhost:11434"
 app = FastAPI()
 app.mount("/static", StaticFiles(directory="static"), name="static")
 @app.post("/chat_api")
-async def chat_endpoint(request: Request):
     body = await request.json()
     model = body.get("model", "qwen3:4b")
     prompt = body.get("prompt")

+import secrets
+import os
 import requests
+from fastapi import FastAPI, Request, HTTPException, Depends
 from fastapi.responses import FileResponse, RedirectResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+# Generate a secure API key if not provided as environment variable
+API_KEY = os.getenv("OLLAMA_API_KEY") or secrets.token_urlsafe(32)
+print(f"API Key: {API_KEY}")  # This will be shown in the console during startup
 OLLAMA_API_URL = "http://localhost:11434"
 app = FastAPI()
+security = HTTPBearer()
 app.mount("/static", StaticFiles(directory="static"), name="static")
+def verify_api_key(credentials: HTTPAuthorizationCredentials = Depends(security)):
+    """Verify that the provided API key is valid"""
+    if credentials.credentials != API_KEY:
+        raise HTTPException(
+            status_code=401,
+            detail="Invalid API key"
+        )
+    return credentials.credentials
 @app.post("/chat_api")
+async def chat_endpoint(request: Request, api_key: str = Depends(verify_api_key)):
     body = await request.json()
     model = body.get("model", "qwen3:4b")
     prompt = body.get("prompt")

static/script.js CHANGED Viewed

@@ -1,7 +1,28 @@
 const messageList = document.getElementById('message-list');
 const messageInput = document.getElementById('message-input');
 const sendButton = document.getElementById('send-button');
 sendButton.addEventListener('click', sendMessage);
 messageInput.addEventListener('keydown', (event) => {
     if (event.key === 'Enter') {
@@ -23,7 +44,8 @@ function sendMessage() {
     fetch('/chat_api', {
         method: 'POST',
         headers: {
-            'Content-Type': 'application/json'
         },
         body: JSON.stringify({
             model: 'qwen3:4b', // You can change the model here

 const messageList = document.getElementById('message-list');
 const messageInput = document.getElementById('message-input');
 const sendButton = document.getElementById('send-button');
+const apiKeyInput = document.getElementById('api-key-input');
+const saveApiKeyButton = document.getElementById('save-api-key');
+// Get API key from localStorage
+let apiKey = localStorage.getItem('ollama_api_key');
+if (apiKey) {
+    apiKeyInput.value = apiKey;
+}
+// Save API key button event
+saveApiKeyButton.addEventListener('click', () => {
+    const newApiKey = apiKeyInput.value.trim();
+    if (newApiKey) {
+        localStorage.setItem('ollama_api_key', newApiKey);
+        apiKey = newApiKey;
+        alert('API key saved successfully!');
+    } else {
+        alert('Please enter a valid API key');
+    }
+});
+// Send message function
 sendButton.addEventListener('click', sendMessage);
 messageInput.addEventListener('keydown', (event) => {
     if (event.key === 'Enter') {
     fetch('/chat_api', {
         method: 'POST',
         headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
         },
         body: JSON.stringify({
             model: 'qwen3:4b', // You can change the model here

static/style.css CHANGED Viewed

@@ -15,6 +15,41 @@ body {
     border-right: 1px solid #ccc;
 }
 #chat-window {
     flex-grow: 1;
     overflow-y: auto;

     border-right: 1px solid #ccc;
 }
+#header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    border-bottom: 1px solid #ccc;
+    background-color: #f9f9f9;
+}
+#header h1 {
+    margin: 0;
+    font-size: 1.5em;
+}
+#api-key-section {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+#api-key-input {
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+#save-api-key {
+    background-color: #007cba;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 3px;
+    cursor: pointer;
+}
 #chat-window {
     flex-grow: 1;
     overflow-y: auto;

tech_spec.md ADDED Viewed

	@@ -0,0 +1,181 @@

+# OllamaSpace Technical Specifications
+## Project Overview
+OllamaSpace is a web-based chat application that serves as a frontend interface for interacting with Ollama language models. The application provides a real-time chat interface where users can communicate with AI models through a web browser.
+## Architecture
+### Backend
+- **Framework**: FastAPI (Python)
+- **API Gateway**: Acts as a proxy between the frontend and Ollama API
+- **Streaming**: Supports real-time streaming of model responses
+- **Default Model**: qwen3:4b
+### Frontend
+- **Technology**: Pure HTML/CSS/JavaScript (no frameworks)
+- **Interface**: Simple chat interface with message history
+- **Interaction**: Real-time message streaming with typing indicators
+- **Styling**: Clean, minimal design with distinct user/bot message styling
+## Components
+### main.py
+- **Framework**: FastAPI
+- **Authentication**: Implements Bearer token authentication using HTTPBearer
+- **Endpoints**:
+  - `GET /` - Redirects to `/chat`
+  - `GET /chat` - Serves the chat HTML page
+  - `POST /chat_api` - API endpoint that forwards requests to Ollama (requires authentication)
+- **Functionality**:
+  - Proxies requests to local Ollama API (http://localhost:11434)
+  - Streams model responses back to the frontend
+  - Handles error cases and validation
+  - Auto-generates secure API key if not provided via environment variable
+### chat.html
+- **Template**: HTML structure for the chat interface with API key management
+- **Layout**:
+  - Header with API key input and save button
+  - Chat window area with message history
+  - Message input field
+  - Send button
+- **Static Assets**: Links to CSS and JavaScript files
+### static/script.js
+- **Features**:
+  - Real-time message streaming from the API
+  - Message display in chat format
+  - Enter key support for sending messages
+  - Stream parsing to handle JSON responses
+  - API key management with localStorage persistence
+  - API key input UI with save functionality
+- **API Communication**:
+  - Includes API key in Authorization header as Bearer token
+  - POSTs to `/chat_api` endpoint
+  - Receives streaming responses and displays incrementally
+  - Handles error cases gracefully
+### static/style.css
+- **Design**: Minimal, clean chat interface with API key management section
+- **Styling**:
+  - Distinct colors for user vs. bot messages
+  - Responsive layout
+  - API key section in header with input field and save button
+  - Auto-scrolling to latest messages
+## Deployment
+### Dockerfile
+- **Base Image**: ollama/ollama
+- **Environment**: Sets up Ollama server and FastAPI gateway
+- **Port Configuration**: Listens on port 7860 (Hugging Face Spaces default)
+- **Model Setup**: Downloads specified model during build process
+- **Dependencies**: Installs Python, FastAPI, and related libraries
+### start.sh
+- **Initialization Sequence**:
+  1. Starts Ollama server in background
+  2. Health checks the Ollama server
+  3. Starts FastAPI gateway on port 7860
+- **Error Handling**: Waits for Ollama to be ready before starting the gateway
+- **API Key**: If auto-generated, the API key will be displayed in the console logs during startup
+## Configuration
+### Environment Variables
+- `OLLAMA_HOST`: 0.0.0.0 (allows external connections)
+- `OLLAMA_ORIGINS`: '*' (allows CORS requests)
+- `OLLAMA_MODEL`: qwen3:4b (default model, can be overridden)
+- `OLLAMA_API_KEY`: (optional) Secure API key (auto-generated if not provided)
+### Default Model
+- **Model**: qwen3:4b
+- **Fallback**: If no model specified in request, uses qwen3:4b
+### API Key Management
+- **Generation**: If no OLLAMA_API_KEY environment variable is set, a cryptographically secure random key is generated at startup
+- **Access**: Generated API key is displayed in the application logs during startup
+- **Frontend Storage**: API key is stored in browser's localStorage after being entered once
+- **Authentication**: All API requests require a valid Bearer token in the Authorization header
+## API Specification
+### `/chat_api` Endpoint
+- **Method**: POST
+- **Authentication**: Requires Bearer token in Authorization header
+- **Content-Type**: application/json
+- **Request Headers**:
+  - `Authorization`: Bearer {your_api_key}
+  - `Content-Type`: application/json
+- **Request Body**:
+  ```json
+  {
+    "model": "string (optional, defaults to qwen3:4b)",
+    "prompt": "string (required)"
+  }
+  ```
+- **Response**: Streaming response with incremental model output
+- **Error Handling**:
+  - Returns 401 for invalid API key
+  - Returns 400 for missing prompt
+### Data Flow
+1. Frontend sends user message to `/chat_api`
+2. Backend forwards request to local Ollama API
+3. Ollama processes request with specified model
+4. Response is streamed back to frontend in real-time
+5. Frontend displays response incrementally as it arrives
+## Security Considerations
+- **API Key Authentication**: Required for all API access using Bearer token authentication
+- **Secure Key Generation**: API key is auto-generated using cryptographically secure random generator (secrets.token_urlsafe(32))
+- **Configurable Keys**: API key can be set via environment variable (OLLAMA_API_KEY) or auto-generated
+- **Storage**: Client-side API key stored in browser's localStorage
+- **CORS**: Enabled for all origins (potential security concern in production)
+- **Input Validation**: Validates presence of prompt parameter
+- **Local API**: Communicates with Ollama through localhost only
+- **Key Exposure**: Auto-generated API key is displayed in console logs during startup (should be secured in production)
+## Performance Features
+- **Streaming**: Real-time response streaming for better UX
+- **Client-side Display**: Incremental message display as responses arrive
+- **Efficient Communication**: Uses streaming HTTP responses to minimize latency
+## Security Features
+- **Authentication**: Bearer token authentication for all API endpoints
+- **Key Generation**: Cryptographically secure random API key generation using secrets module
+- **Key Storage**: API key stored in browser localStorage (with option to enter via UI)
+- **Transport Security**: API key transmitted via Authorization header (should use HTTPS in production)
+## Technologies Used
+- **Backend**: Python, FastAPI
+- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
+- **Containerization**: Docker
+- **AI Model**: Ollama with qwen3:4b by default
+- **Web Server**: Uvicorn ASGI server
+## File Structure
+```
+OllamaSpace/
+├── main.py (FastAPI application)
+├── chat.html (Chat interface)
+├── start.sh (Container startup script)
+├── Dockerfile (Container configuration)
+├── README.md (Project description)
+├── static/
+│   ├── script.js (Frontend JavaScript)
+│   └── style.css (Frontend styling)
+```
+## Build Process
+1. Container built with Ollama and Python dependencies
+2. Model specified by OLLAMA_MODEL environment variable is pre-pulled
+3. Application files are copied into container
+4. FastAPI dependencies are installed
+5. Container starts with Ollama server and FastAPI gateway
+## Deployment Target
+- **Platform**: Designed for Hugging Face Spaces
+- **Port**: 7860 (standard for Hugging Face Spaces)
+- **Runtime**: Docker container
+- **Model Serving**: Ollama with FastAPI gateway