Spaces:

NitinBot001
/

MedBot_backend

Sleeping

App Files Files Community

NitinBot001 commited on Sep 23

Commit

3db77d8

verified ·

1 Parent(s): b8ad7d1

Upload 3 files

Browse files

Files changed (3) hide show

index.html +81 -0
script.js +352 -0
style.css +251 -0

index.html ADDED Viewed

	@@ -0,0 +1,81 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MediBot Conversational AI</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+<body>
+    <div class="main-container">
+        <!-- Video Element (for video mode) -->
+        <video id="video-feed" autoplay playsinline muted></video>
+        <div class="chat-app">
+            <div class="header">
+                <div class="app-title">
+                    <i class="fas fa-robot"></i>
+                    <span>MediBot Assistant</span>
+                </div>
+                <div class="status-indicator" id="status-indicator">● Connecting...</div>
+            </div>
+            <div class="chat-box" id="chat-box">
+                <!-- Messages will be appended here -->
+            </div>
+            <div class="loading-indicator" id="loading-indicator" style="display: none;">
+                <div class="spinner"></div>
+                <span>MediBot is thinking...</span>
+            </div>
+            <div class="input-area">
+                <input type="text" id="text-input" placeholder="Type your message...">
+                <button id="mic-btn" class="control-btn"><i class="fas fa-microphone"></i></button>
+                <button id="send-btn" class="control-btn"><i class="fas fa-paper-plane"></i></button>
+            </div>
+        </div>
+        <div class="controls-panel">
+            <h3>Controls</h3>
+            <div class="mode-switcher">
+                <button id="mode-text" class="mode-btn active">Text</button>
+                <button id="mode-voice" class="mode-btn">Voice</button>
+                <button id="mode-video" class="mode-btn">Video</button>
+            </div>
+            <div id="voice-controls" class="control-section hidden">
+                <h4>Voice Settings</h4>
+                <div class="toggle-switch">
+                    <span>Push-to-Talk</span>
+                    <label class="switch">
+                        <input type="checkbox" id="continuous-toggle">
+                        <span class="slider round"></span>
+                    </label>
+                    <span>Continuous</span>
+                </div>
+                <div class="tts-settings">
+                    <label for="rate">Speed:</label>
+                    <input type="range" id="rate" min="0.5" max="2" value="1" step="0.1">
+                    <label for="pitch">Pitch:</label>
+                    <input type="range" id="pitch" min="0" max="2" value="1" step="0.1">
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Image Capture Popup/Modal -->
+    <div id="image-capture-modal" class="modal-overlay hidden">
+        <div class="modal-content">
+            <h3><i class="fas fa-camera"></i> Image Capture Required</h3>
+            <p>Don't shake the camera, I am analyzing the object.</p>
+            <button id="close-modal-btn">Okay, I'm Ready</button>
+        </div>
+    </div>
+    <!-- Canvas for capturing image -->
+    <canvas id="canvas" style="display: none;"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,352 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // DOM Elements
+    const chatBox = document.getElementById('chat-box');
+    const textInput = document.getElementById('text-input');
+    const sendBtn = document.getElementById('send-btn');
+    const micBtn = document.getElementById('mic-btn');
+    const loadingIndicator = document.getElementById('loading-indicator');
+    const statusIndicator = document.getElementById('status-indicator');
+    // Mode Buttons
+    const modeTextBtn = document.getElementById('mode-text');
+    const modeVoiceBtn = document.getElementById('mode-voice');
+    const modeVideoBtn = document.getElementById('mode-video');
+    // Voice Controls
+    const voiceControls = document.getElementById('voice-controls');
+    const continuousToggle = document.getElementById('continuous-toggle');
+    const rateSlider = document.getElementById('rate');
+    const pitchSlider = document.getElementById('pitch');
+    // Video Elements
+    const videoFeed = document.getElementById('video-feed');
+    const canvas = document.getElementById('canvas');
+    const imageModal = document.getElementById('image-capture-modal');
+    const closeModalBtn = document.getElementById('close-modal-btn');
+    // State Variables
+    let sessionId = null; // Will be set before each new query
+    let currentMode = 'text'; // 'text', 'voice', 'video'
+    let isListening = false;
+    let isContinuousMode = false;
+    let videoStream = null;
+    const API_BASE_URL = 'https://nitinbot001-medbot-backend.hf.space';
+    // Speech Recognition (STT) Setup
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    let recognition;
+    if (SpeechRecognition) {
+        recognition = new SpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.lang = 'en-US'; // You can change this
+    } else {
+        micBtn.disabled = true;
+        addMessageToUI('error', 'Speech Recognition is not supported in this browser.');
+    }
+    // Speech Synthesis (TTS) Setup
+    const synth = window.speechSynthesis;
+    // --- INITIALIZATION ---
+    function initializeApp() {
+        loadHistory();
+        setupEventListeners();
+        statusIndicator.textContent = '● Ready';
+        statusIndicator.style.color = '#cccccc';
+        addMessageToUI('ai', 'Hello! I am your MediBot Assistant. How can I help you today?');
+    }
+    async function startNewSession() {
+        statusIndicator.textContent = '● Connecting...';
+        statusIndicator.style.color = 'orange';
+        try {
+            const response = await fetch(`${API_BASE_URL}/start_session`, { method: 'POST' });
+            if (!response.ok) throw new Error('Failed to start session');
+            const data = await response.json();
+            sessionId = data.session_id; // Set the session ID for the current transaction
+            statusIndicator.textContent = '● Connected';
+            statusIndicator.style.color = '#76ff03';
+            console.log('New transaction session started:', sessionId);
+            return true; // Indicate success
+        } catch (error) {
+            console.error('Session start error:', error);
+            sessionId = null; // Ensure session ID is null on failure
+            statusIndicator.textContent = '● Connection Failed';
+            statusIndicator.style.color = '#ff4d4d';
+            addMessageToUI('error', `Could not connect to the server. ${error.message}`);
+            return false; // Indicate failure
+        }
+    }
+    // --- EVENT LISTENERS ---
+    function setupEventListeners() {
+        sendBtn.addEventListener('click', handleTextInput);
+        textInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') handleTextInput();
+        });
+        // Mode Switching
+        modeTextBtn.addEventListener('click', () => switchMode('text'));
+        modeVoiceBtn.addEventListener('click', () => switchMode('voice'));
+        modeVideoBtn.addEventListener('click', () => switchMode('video'));
+        // Voice Controls
+        micBtn.addEventListener('click', toggleListening);
+        continuousToggle.addEventListener('change', (e) => {
+            isContinuousMode = e.target.checked;
+            if (recognition) {
+                recognition.continuous = isContinuousMode;
+            }
+        });
+        // STT Events
+        if (recognition) {
+            recognition.onstart = () => {
+                isListening = true;
+                micBtn.classList.add('listening');
+                micBtn.innerHTML = '<i class="fas fa-stop"></i>';
+            };
+            recognition.onend = () => {
+                isListening = false;
+                micBtn.classList.remove('listening');
+                micBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+                if (isContinuousMode && currentMode !== 'text') {
+                    recognition.start(); // Keep listening in continuous mode
+                }
+            };
+            recognition.onresult = (event) => {
+                const transcript = event.results[event.results.length - 1][0].transcript.trim();
+                textInput.value = transcript;
+                processUserQuery(transcript);
+            };
+            recognition.onerror = (event) => {
+                console.error('Speech recognition error:', event.error);
+                addMessageToUI('error', `Speech recognition error: ${event.error}`);
+            };
+        }
+        // Image Capture Modal
+        closeModalBtn.addEventListener('click', () => {
+            imageModal.classList.add('hidden');
+            addMessageToUI('ai', 'Capturing image in 1 second...');
+            setTimeout(captureAndSendImage, 1000);
+        });
+    }
+    // --- CORE LOGIC ---
+    function handleTextInput() {
+        const query = textInput.value.trim();
+        if (query) {
+            processUserQuery(query);
+            textInput.value = '';
+        }
+    }
+    async function processUserQuery(query) {
+        addMessageToUI('user', query);
+        showLoading(true);
+        // *** CHANGED LOGIC: Start a new session for every query ***
+        const sessionStarted = await startNewSession();
+        if (!sessionStarted) {
+            showLoading(false);
+            return; // Stop if session could not be created
+        }
+        try {
+            const response = await fetch(`${API_BASE_URL}/process_query`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ session_id: sessionId, query: query })
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                throw new Error(data.error || 'API request failed');
+            }
+            if (data.status === 'image_required') {
+                handleImageRequest(data.message);
+            } else {
+                const message = data.response?.response || data.data;
+                handleApiResponse(message);
+            }
+        } catch (error) {
+            console.error('Error processing query:', error);
+            handleApiResponse(`Sorry, I encountered an error: ${error.message}`, true);
+        } finally {
+            showLoading(false);
+        }
+    }
+    function handleApiResponse(message, isError = false) {
+        const type = isError ? 'error' : 'ai';
+        addMessageToUI(type, message);
+        if (!isError && (currentMode === 'voice' || currentMode === 'video')) {
+            speak(message);
+        }
+    }
+    // --- UI & STATE MANAGEMENT ---
+    function switchMode(newMode) {
+        if (currentMode === newMode) return;
+        if (currentMode === 'video') stopCamera();
+        if (isListening && recognition) recognition.stop();
+        currentMode = newMode;
+        document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
+        document.getElementById(`mode-${newMode}`).classList.add('active');
+        if (newMode === 'text') {
+            document.body.classList.remove('body-video-mode');
+            voiceControls.classList.add('hidden');
+            micBtn.classList.add('hidden');
+            sendBtn.classList.remove('hidden');
+            textInput.classList.remove('hidden');
+            videoFeed.style.display = 'none';
+        } else if (newMode === 'voice') {
+            document.body.classList.remove('body-video-mode');
+            voiceControls.classList.remove('hidden');
+            micBtn.classList.remove('hidden');
+            sendBtn.classList.add('hidden');
+            textInput.classList.add('hidden');
+            videoFeed.style.display = 'none';
+        } else if (newMode === 'video') {
+            document.body.classList.add('body-video-mode');
+            voiceControls.classList.remove('hidden');
+            micBtn.classList.remove('hidden');
+            sendBtn.classList.add('hidden');
+            textInput.classList.add('hidden');
+            videoFeed.style.display = 'block';
+            startCamera();
+        }
+    }
+    function addMessageToUI(sender, text) {
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('message', `${sender}-message`);
+        messageDiv.textContent = text;
+        chatBox.appendChild(messageDiv);
+        chatBox.scrollTop = chatBox.scrollHeight;
+        saveHistory();
+    }
+    function showLoading(show) {
+        loadingIndicator.style.display = show ? 'flex' : 'none';
+    }
+    // --- VOICE & VIDEO ---
+    function toggleListening() {
+        if (!recognition) return;
+        if (isListening) {
+            recognition.stop();
+        } else {
+            recognition.start();
+        }
+    }
+    function speak(text) {
+        if (synth.speaking) {
+            console.error('SpeechSynthesis is already speaking.');
+            return;
+        }
+        if (text !== '') {
+            const utterance = new SpeechSynthesisUtterance(text);
+            const femaleVoice = synth.getVoices().find(voice => voice.name.includes('Female') || voice.gender === 'female');
+            if(femaleVoice) utterance.voice = femaleVoice;
+            utterance.pitch = pitchSlider.value;
+            utterance.rate = rateSlider.value;
+            synth.speak(utterance);
+        }
+    }
+    async function startCamera() {
+        try {
+            videoStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+            videoFeed.srcObject = videoStream;
+        } catch (err) {
+            console.error("Error accessing camera: ", err);
+            addMessageToUI('error', 'Could not access the camera. Please grant permission.');
+            switchMode('voice');
+        }
+    }
+    function stopCamera() {
+        if (videoStream) {
+            videoStream.getTracks().forEach(track => track.stop());
+            videoFeed.srcObject = null;
+            videoStream = null;
+        }
+    }
+    function handleImageRequest(message) {
+        addMessageToUI('ai', message);
+        if (currentMode !== 'video') {
+            addMessageToUI('ai', "Please switch to Video mode to provide an image.");
+        } else {
+            imageModal.classList.remove('hidden');
+        }
+    }
+    async function captureAndSendImage() {
+        if (!videoStream || !sessionId) {
+            addMessageToUI('error', 'Cannot capture image. Video stream or session is not active.');
+            return;
+        };
+        const videoTrack = videoStream.getVideoTracks()[0];
+        const settings = videoTrack.getSettings();
+        canvas.width = settings.width;
+        canvas.height = settings.height;
+        const context = canvas.getContext('2d');
+        context.drawImage(videoFeed, 0, 0, canvas.width, canvas.height);
+        canvas.toBlob(async (blob) => {
+            const formData = new FormData();
+            formData.append('session_id', sessionId);
+            formData.append('photo', blob, 'capture.jpg');
+            showLoading(true);
+            try {
+                const response = await fetch(`${API_BASE_URL}/process_with_image`, {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.message || 'Image processing failed');
+                const message = data.response?.response || data.data;
+                handleApiResponse(message);
+            } catch (error) {
+                console.error('Error sending image:', error);
+                handleApiResponse(`Sorry, I couldn't process the image: ${error.message}`, true);
+            } finally {
+                showLoading(false);
+            }
+        }, 'image/jpeg');
+    }
+    // --- LOCAL STORAGE ---
+    function saveHistory() {
+        localStorage.setItem('medibotChatHistory', chatBox.innerHTML);
+    }
+    function loadHistory() {
+        const history = localStorage.getItem('medibotChatHistory');
+        if (history) {
+            chatBox.innerHTML = history;
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }
+    }
+    // --- START THE APP ---
+    initializeApp();
+});

style.css ADDED Viewed

	@@ -0,0 +1,251 @@

+:root {
+    --primary-bg: #f0f2f5;
+    --secondary-bg: #ffffff;
+    --header-bg: #00a884;
+    --user-msg-bg: #d9fdd3;
+    --ai-msg-bg: #ffffff;
+    --text-dark: #111b21;
+    --text-light: #ffffff;
+    --border-color: #e9edef;
+    --accent-color: #005c4b;
+}
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    background-color: var(--primary-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+.main-container {
+    display: flex;
+    gap: 20px;
+    width: 95%;
+    max-width: 1200px;
+    height: 90vh;
+    max-height: 800px;
+}
+.chat-app {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--secondary-bg);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    overflow: hidden;
+    position: relative;
+}
+#video-feed {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    object-fit: cover;
+    z-index: -1;
+    display: none;
+}
+.body-video-mode .chat-app {
+    background-color: rgba(0, 0, 0, 0.4); /* Make chat slightly transparent */
+}
+.header {
+    background-color: var(--header-bg);
+    color: var(--text-light);
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.app-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+.app-title i { margin-right: 10px; }
+.status-indicator {
+    font-size: 0.8rem;
+    opacity: 0.9;
+}
+.chat-box {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
+    background-repeat: repeat;
+    display: flex;
+    flex-direction: column;
+}
+.message {
+    padding: 10px 15px;
+    border-radius: 18px;
+    margin-bottom: 10px;
+    max-width: 70%;
+    word-wrap: break-word;
+}
+.user-message {
+    background-color: var(--user-msg-bg);
+    align-self: flex-end;
+    border-bottom-right-radius: 4px;
+}
+.ai-message {
+    background-color: var(--ai-msg-bg);
+    align-self: flex-start;
+    border: 1px solid var(--border-color);
+    border-bottom-left-radius: 4px;
+}
+.error-message {
+    background-color: #ffdddd;
+    color: #d8000c;
+    align-self: center;
+    max-width: 80%;
+    text-align: center;
+}
+.input-area {
+    display: flex;
+    padding: 10px;
+    background-color: var(--primary-bg);
+    border-top: 1px solid var(--border-color);
+}
+#text-input {
+    flex-grow: 1;
+    border: none;
+    padding: 12px 15px;
+    border-radius: 20px;
+    font-size: 1rem;
+}
+#text-input:focus { outline: none; }
+.control-btn {
+    background: var(--header-bg);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    margin-left: 10px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    transition: background-color 0.2s;
+}
+.control-btn:hover { background-color: var(--accent-color); }
+#mic-btn.listening { background-color: #ff4d4d; }
+.controls-panel {
+    flex: 1;
+    background: var(--secondary-bg);
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+.controls-panel h3, .controls-panel h4 {
+    margin-top: 0;
+    color: var(--accent-color);
+    border-bottom: 2px solid var(--border-color);
+    padding-bottom: 10px;
+}
+.mode-switcher {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+.mode-btn {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid var(--header-bg);
+    background: white;
+    color: var(--header-bg);
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.mode-btn.active, .mode-btn:hover {
+    background: var(--header-bg);
+    color: white;
+}
+.control-section {
+    margin-top: 20px;
+}
+.hidden { display: none !important; }
+/* Toggle Switch */
+.toggle-switch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
+.switch input { opacity: 0; width: 0; height: 0; }
+.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
+.slider.round { border-radius: 34px; }
+.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
+input:checked + .slider { background-color: var(--header-bg); }
+input:checked + .slider:before { transform: translateX(26px); }
+/* TTS Sliders */
+.tts-settings { display: flex; flex-direction: column; gap: 10px; }
+.tts-settings label { font-weight: bold; }
+.tts-settings input[type="range"] { width: 100%; }
+/* Loading Indicator */
+.loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 10px;
+    background-color: rgba(255, 255, 255, 0.8);
+}
+.spinner {
+    border: 4px solid rgba(0,0,0,0.1);
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border-left-color: var(--header-bg);
+    animation: spin 1s ease infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: rgba(0,0,0,0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.modal-content {
+    background: white;
+    padding: 30px;
+    border-radius: 8px;
+    text-align: center;
+    max-width: 400px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+#close-modal-btn {
+    background: var(--header-bg);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 15px;
+    font-size: 1rem;
+}