From 5d17a5f152f9c031bbd5d341093d42e805194499 Mon Sep 17 00:00:00 2001
From: Krikorios <99836218+Krikorios@users.noreply.github.com>
Date: Sun, 25 May 2025 03:17:05 +0300
Subject: [PATCH] add html file

---
 index.html | 640 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 640 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3f77b1e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,640 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ollama Vision Chat</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 1200px;
+            height: 90vh;
+            display: grid;
+            grid-template-columns: 1fr 400px;
+            overflow: hidden;
+        }
+
+        .video-section {
+            position: relative;
+            background: #000;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .video-container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #videoElement {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 20px 0 0 20px;
+        }
+
+        .video-overlay {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 10;
+        }
+
+        .status-indicator {
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #ff4444;
+            animation: pulse 2s infinite;
+        }
+
+        .status-dot.connected {
+            background: #44ff44;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        .controls {
+            background: rgba(0, 0, 0, 0.7);
+            padding: 8px;
+            border-radius: 20px;
+            display: flex;
+            gap: 10px;
+        }
+
+        .control-btn {
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            padding: 10px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .control-btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: scale(1.1);
+        }
+
+        .chat-section {
+            display: flex;
+            flex-direction: column;
+            background: #f8f9fa;
+        }
+
+        .chat-header {
+            background: #fff;
+            padding: 20px;
+            border-bottom: 1px solid #e9ecef;
+            text-align: center;
+        }
+
+        .chat-header h2 {
+            color: #495057;
+            margin-bottom: 5px;
+        }
+
+        .chat-header p {
+            color: #6c757d;
+            font-size: 14px;
+        }
+
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .message {
+            max-width: 80%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            font-size: 14px;
+            line-height: 1.4;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .message.user {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            align-self: flex-end;
+            border-bottom-right-radius: 4px;
+        }
+
+        .message.assistant {
+            background: #fff;
+            color: #495057;
+            align-self: flex-start;
+            border: 1px solid #e9ecef;
+            border-bottom-left-radius: 4px;
+        }
+
+        .message.system {
+            background: #fff3cd;
+            color: #856404;
+            align-self: center;
+            font-size: 12px;
+            border: 1px solid #ffeaa7;
+        }
+
+        .input-container {
+            padding: 20px;
+            background: #fff;
+            border-top: 1px solid #e9ecef;
+            display: flex;
+            gap: 10px;
+            align-items: flex-end;
+        }
+
+        .input-wrapper {
+            flex: 1;
+            position: relative;
+        }
+
+        #messageInput {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e9ecef;
+            border-radius: 20px;
+            font-size: 14px;
+            resize: none;
+            max-height: 100px;
+            min-height: 44px;
+            transition: border-color 0.3s ease;
+        }
+
+        #messageInput:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .send-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            color: white;
+            padding: 12px 16px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            white-space: nowrap;
+        }
+
+        .send-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        .send-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        .settings-panel {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            min-width: 200px;
+            display: none;
+        }
+
+        .settings-panel.show {
+            display: block;
+        }
+
+        .setting-item {
+            margin-bottom: 10px;
+        }
+
+        .setting-item label {
+            display: block;
+            font-size: 12px;
+            margin-bottom: 5px;
+        }
+
+        .setting-item input, .setting-item select {
+            width: 100%;
+            padding: 5px;
+            border: none;
+            border-radius: 4px;
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+        }
+
+        .setting-item input::placeholder {
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                grid-template-columns: 1fr;
+                grid-template-rows: 1fr 1fr;
+                max-width: 100%;
+                height: 95vh;
+            }
+
+            #videoElement {
+                border-radius: 20px 20px 0 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="video-section">
+            <div class="video-container">
+                <video id="videoElement" autoplay muted playsinline></video>
+                <canvas id="captureCanvas" style="display: none;"></canvas>
+                
+                <div class="video-overlay">
+                    <div class="status-indicator">
+                        <div class="status-dot" id="statusDot"></div>
+                        <span id="statusText">Disconnected</span>
+                    </div>
+                    
+                    <div class="controls">
+                        <button class="control-btn" id="settingsBtn" title="Settings">⚙️</button>
+                        <button class="control-btn" id="captureBtn" title="Take Photo">📸</button>
+                        <button class="control-btn" id="pauseBtn" title="Pause/Resume">⏸️</button>
+                    </div>
+                </div>
+
+                <div class="settings-panel" id="settingsPanel">
+                    <div class="setting-item">
+                        <label>Ollama Server URL:</label>
+                        <input type="text" id="ollamaUrl" value="http://localhost:11434" placeholder="http://localhost:11434">
+                    </div>
+                    <div class="setting-item">
+                        <label>Vision Model:</label>
+                        <input type="text" id="modelName" value="llava" placeholder="llava">
+                    </div>
+                    <div class="setting-item">
+                        <label>Auto-capture Interval (seconds):</label>
+                        <input type="number" id="captureInterval" value="10" min="5" max="60">
+                    </div>
+                    <div class="setting-item">
+                        <label>Enable Auto-capture:</label>
+                        <input type="checkbox" id="autoCapture" checked>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="chat-section">
+            <div class="chat-header">
+                <h2>Vision Chat</h2>
+                <p>I can see what you're doing and chat about it!</p>
+            </div>
+
+            <div class="messages-container" id="messagesContainer">
+                <div class="message system">
+                    Welcome! I'm connected to your camera and can see what you're doing. Ask me anything about what I can see, or just chat with me!
+                </div>
+            </div>
+
+            <div class="input-container">
+                <div class="input-wrapper">
+                    <textarea 
+                        id="messageInput" 
+                        placeholder="Type your message or ask about what I can see..."
+                        rows="1"
+                    ></textarea>
+                </div>
+                <button class="send-btn" id="sendBtn">Send</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class VisionChatApp {
+            constructor() {
+                this.video = document.getElementById('videoElement');
+                this.canvas = document.getElementById('captureCanvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.messagesContainer = document.getElementById('messagesContainer');
+                this.messageInput = document.getElementById('messageInput');
+                this.sendBtn = document.getElementById('sendBtn');
+                this.statusDot = document.getElementById('statusDot');
+                this.statusText = document.getElementById('statusText');
+                
+                this.ollamaUrl = 'http://localhost:11434';
+                this.modelName = 'llava';
+                this.isConnected = false;
+                this.captureIntervalId = null;
+                this.lastCaptureTime = 0;
+                this.currentImageData = null;
+                
+                this.init();
+            }
+
+            async init() {
+                await this.setupCamera();
+                this.setupEventListeners();
+                this.checkOllamaConnection();
+                this.startAutoCapture();
+            }
+
+            async setupCamera() {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({
+                        video: { 
+                            width: { ideal: 1280 }, 
+                            height: { ideal: 720 },
+                            facingMode: 'user'
+                        }
+                    });
+                    
+                    this.video.srcObject = stream;
+                    
+                    this.video.addEventListener('loadedmetadata', () => {
+                        this.canvas.width = this.video.videoWidth;
+                        this.canvas.height = this.video.videoHeight;
+                    });
+                    
+                    this.addMessage('system', 'Camera connected successfully!');
+                } catch (error) {
+                    console.error('Camera setup failed:', error);
+                    this.addMessage('system', 'Failed to access camera. Please check permissions.');
+                }
+            }
+
+            setupEventListeners() {
+                // Send message
+                this.sendBtn.addEventListener('click', () => this.sendMessage());
+                this.messageInput.addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        this.sendMessage();
+                    }
+                });
+
+                // Auto-resize textarea
+                this.messageInput.addEventListener('input', () => {
+                    this.messageInput.style.height = 'auto';
+                    this.messageInput.style.height = this.messageInput.scrollHeight + 'px';
+                });
+
+                // Control buttons
+                document.getElementById('captureBtn').addEventListener('click', () => {
+                    this.captureFrame();
+                    this.addMessage('system', 'Photo captured!');
+                });
+
+                document.getElementById('pauseBtn').addEventListener('click', () => {
+                    this.toggleAutoCapture();
+                });
+
+                document.getElementById('settingsBtn').addEventListener('click', () => {
+                    const panel = document.getElementById('settingsPanel');
+                    panel.classList.toggle('show');
+                });
+
+                // Settings
+                document.getElementById('ollamaUrl').addEventListener('change', (e) => {
+                    this.ollamaUrl = e.target.value;
+                    this.checkOllamaConnection();
+                });
+
+                document.getElementById('modelName').addEventListener('change', (e) => {
+                    this.modelName = e.target.value;
+                });
+
+                document.getElementById('autoCapture').addEventListener('change', (e) => {
+                    if (e.target.checked) {
+                        this.startAutoCapture();
+                    } else {
+                        this.stopAutoCapture();
+                    }
+                });
+
+                document.getElementById('captureInterval').addEventListener('change', (e) => {
+                    this.stopAutoCapture();
+                    if (document.getElementById('autoCapture').checked) {
+                        this.startAutoCapture();
+                    }
+                });
+            }
+
+            async checkOllamaConnection() {
+                try {
+                    const response = await fetch(`${this.ollamaUrl}/api/tags`);
+                    if (response.ok) {
+                        this.setConnectionStatus(true);
+                        const data = await response.json();
+                        const hasVisionModel = data.models.some(model => 
+                            model.name.includes(this.modelName) || 
+                            model.name.includes('llava') || 
+                            model.name.includes('vision')
+                        );
+                        
+                        if (!hasVisionModel) {
+                            this.addMessage('system', `Warning: ${this.modelName} model not found. Available models: ${data.models.map(m => m.name).join(', ')}`);
+                        }
+                    } else {
+                        throw new Error('Connection failed');
+                    }
+                } catch (error) {
+                    console.error('Ollama connection failed:', error);
+                    this.setConnectionStatus(false);
+                    this.addMessage('system', 'Failed to connect to Ollama. Make sure it\'s running on ' + this.ollamaUrl);
+                }
+            }
+
+            setConnectionStatus(connected) {
+                this.isConnected = connected;
+                this.statusDot.classList.toggle('connected', connected);
+                this.statusText.textContent = connected ? 'Connected' : 'Disconnected';
+            }
+
+            captureFrame() {
+                if (!this.video.videoWidth || !this.video.videoHeight) return null;
+                
+                this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+                const imageData = this.canvas.toDataURL('image/jpeg', 0.8);
+                this.currentImageData = imageData.split(',')[1]; // Remove data:image/jpeg;base64, prefix
+                this.lastCaptureTime = Date.now();
+                
+                return this.currentImageData;
+            }
+
+            startAutoCapture() {
+                this.stopAutoCapture();
+                const interval = parseInt(document.getElementById('captureInterval').value) * 1000;
+                
+                this.captureIntervalId = setInterval(() => {
+                    this.captureFrame();
+                }, interval);
+                
+                // Capture first frame immediately
+                this.captureFrame();
+            }
+
+            stopAutoCapture() {
+                if (this.captureIntervalId) {
+                    clearInterval(this.captureIntervalId);
+                    this.captureIntervalId = null;
+                }
+            }
+
+            toggleAutoCapture() {
+                const autoCapture = document.getElementById('autoCapture');
+                autoCapture.checked = !autoCapture.checked;
+                
+                if (autoCapture.checked) {
+                    this.startAutoCapture();
+                    this.addMessage('system', 'Auto-capture resumed');
+                } else {
+                    this.stopAutoCapture();
+                    this.addMessage('system', 'Auto-capture paused');
+                }
+            }
+
+            async sendMessage() {
+                const message = this.messageInput.value.trim();
+                if (!message) return;
+
+                if (!this.isConnected) {
+                    this.addMessage('system', 'Not connected to Ollama. Please check the connection.');
+                    return;
+                }
+
+                // Capture current frame if we don't have recent data
+                if (!this.currentImageData || (Date.now() - this.lastCaptureTime > 15000)) {
+                    this.captureFrame();
+                }
+
+                this.addMessage('user', message);
+                this.messageInput.value = '';
+                this.messageInput.style.height = 'auto';
+                this.setSendingState(true);
+
+                try {
+                    const response = await this.sendToOllama(message, this.currentImageData);
+                    this.addMessage('assistant', response);
+                } catch (error) {
+                    console.error('Error sending message:', error);
+                    this.addMessage('system', 'Error: ' + error.message);
+                } finally {
+                    this.setSendingState(false);
+                }
+            }
+
+            async sendToOllama(message, imageData) {
+                const payload = {
+                    model: this.modelName,
+                    prompt: message,
+                    stream: false
+                };
+
+                if (imageData) {
+                    payload.images = [imageData];
+                }
+
+                const response = await fetch(`${this.ollamaUrl}/api/generate`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload)
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+                return data.response || 'No response received';
+            }
+
+            addMessage(type, content) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message ${type}`;
+                messageDiv.textContent = content;
+                
+                this.messagesContainer.appendChild(messageDiv);
+                this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+            }
+
+            setSendingState(sending) {
+                this.sendBtn.disabled = sending;
+                this.sendBtn.textContent = sending ? 'Sending...' : 'Send';
+                this.messageInput.disabled = sending;
+            }
+        }
+
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', () => {
+            new VisionChatApp();
+        });
+    </script>
+</body>
+</html>
+
