Hospital Chatbot Notebook

The Hospital Chatbot is designed to assist users by providing answers to medical-related questions. Powered by the Google Gemini API, this chatbot acts as a virtual medical professional, offering insights on hospitals, diseases, treatments, and more.

Features

• Interactive chatbot interface for user queries.
• Powered by Google Gemini API for accurate responses.
• Local storage for chat history to enhance user experience.
• Clear and responsive design styled with Tailwind CSS.

Implementation

Below is the implementation of the Hospital Chatbot using JavaScript and Tailwind CSS. The chatbot communicates with the Google Gemini API to fetch responses based on user input.

Frontend Code

        
            <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
                <div class="w-full max-w-md space-y-6">
                    <div class="text-center">
                        <h1 class="text-3xl font-bold text-indigo-600">MediPulse Chatbot</h1>
                        <p class="mt-2 text-sm text-gray-600">Ask questions about hospitals, diseases, or treatments.</p>
                    </div>
                    <div id="chat-container" class="h-80 overflow-y-auto bg-white border border-gray-300 rounded-lg p-4 space-y-2 shadow-inner"></div>
                    <form id="chat-form" class="flex space-x-2">
                        <input id="user-input" type="text" placeholder="Type your message..." required class="flex-1 rounded-md border border-gray-300 px-4 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500" />
                        <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-semibold shadow">Send</button>
                    </form>
                    <button id="clear-history" class="w-full bg-gray-200 text-gray-800 py-2 rounded-md hover:bg-gray-300 text-sm font-medium">Clear History</button>
                </div>
            </div>
        
    

Backend Code

        
            import { fetchOptions, pythonURI } from "./config.js";

            export async function postChat(userInput) {
                try {
                    const response = await fetch(`${pythonURI}/api/chatbot`, {
                        method: 'POST',
                        mode: 'cors',
                        cache: 'default',
                        credentials: 'include',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Origin': 'client'
                        },
                        body: JSON.stringify({ user_input: userInput })
                    });

                    if (!response.ok) {
                        const errorText = await response.text();
                        console.error(`Failed to get chatbot reply: ${response.status} - ${errorText}`);
                        throw new Error(`Failed to get chatbot reply: ${response.status}`);
                    }

                    const result = await response.json();
                    return { success: true, ...result };
                } catch (error) {
                    console.error('Error posting to chatbot:', error);
                    return { success: false };
                }
            }
        
    

How It Works

The chatbot interface allows users to type their questions, which are sent to the Google Gemini API. The API processes the input and returns a response, which is displayed in the chat container. Chat history is saved locally to improve user experience.

Conclusion

The Hospital Chatbot is a powerful tool for users seeking medical information. By leveraging the Google Gemini API, it provides accurate and reliable responses in a user-friendly interface.