From c265f5c56163b84d6c164b5c864af96d5ab7cc48 Mon Sep 17 00:00:00 2001 From: yashksaini-coder Date: Wed, 10 Jul 2024 21:14:33 +0530 Subject: [PATCH 01/14] Add app.py main flask application --- app.py | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 app.py diff --git a/app.py b/app.py new file mode 100644 index 0000000..6dfc5fe --- /dev/null +++ b/app.py @@ -0,0 +1,63 @@ +from flask import Flask, redirect, render_template, url_for, request, jsonify +from dotenv import load_dotenv +import google.generativeai as genai +from PIL import Image +import os +from markdown import markdown + +load_dotenv('.env') +genai.configure(api_key=os.getenv('API_KEY')) + +model = genai.GenerativeModel('gemini-pro') +chat_model = model.start_chat(history=[]) # chat based on history + +img_model = genai.GenerativeModel('gemini-pro-vision') + +app = Flask(__name__) + + +@app.route("/") +def home(): + return render_template("index.html") + +# Text to text + + +@app.route("/chat", methods=['GET', 'POST']) +def chat(): + if request.method == 'POST': + query = request.json['query'] + if (len(query.strip()) == 0): + return jsonify("Please enter something!") + try: + gemini_response = chat_model.send_message( + query).text # Send message based on the chat history + except: + return jsonify("Something went wrong!") + + return jsonify(markdown(gemini_response)) + else: + return render_template("chats.html") + +# Image to text + + +@app.route("/image_chat", methods=['POST', 'GET']) +def image_chat(): + if request.method == 'POST': + img = request.files['image'] # Loads the file + q = request.form['query'] # Loads the query + + image = Image.open(img) # Read the image in PIL format + try: + response = img_model.generate_content( + [q, image]) # Generate content for the image + except: + return jsonify("Something went wrong!") + return jsonify(markdown(response.text)) + else: + return render_template("image_upload.html") + + +if __name__ == "__main__": + app.run(port=8080, debug=True) From 6698ad42e2c2f35dda984b827fb5122d88b78d01 Mon Sep 17 00:00:00 2001 From: yashksaini-coder Date: Wed, 10 Jul 2024 21:15:57 +0530 Subject: [PATCH 02/14] Add requirements.txt --- requirements.txt | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 requirements.txt diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..18bd88e --- /dev/null +++ b/requirements.txt @@ -0,0 +1,7 @@ +Flask==3.0.3 +Gunicorn +Markdown==3.4.4 +google-generativeai==0.3.2 +Pillow==9.5.0 +protobuf +python-dotenv==1.0.1 \ No newline at end of file From 477a816bc0a0f4af32884fbe981f14ca797f14b5 Mon Sep 17 00:00:00 2001 From: yashksaini-coder Date: Wed, 10 Jul 2024 21:20:28 +0530 Subject: [PATCH 03/14] Update README.md --- README.md | 86 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 44 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 139f438..8018f47 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,59 @@ -# Gemini Bot +## Introduction -## Overview -Gemini Bot is a conversational agent powered by a generative model from Google's GenerativeAI service. It allows users to engage in text-based conversations by asking questions or initiating discussions. The bot utilizes Streamlit, a Python library for building interactive web applications, to create a user-friendly interface for interaction. +Welcome to FlaskGem, an AI-based web application created using Flask. FlaskGem utilizes the Gemini AI platform to provide text and image query capabilities. This documentation will guide you through the features and usage of FlaskGem. -## Requirements -- Python 3.11 -- Streamlit -- Google GenerativeAI account and API key +![Logo](./static/ai_bot.png) -## Installation -1. Clone GitHub repository:-
-git clone https://github.com/yashksaini-coder/Gemini-Bot +## Features -2. Install the required Python packages using pip:-
-pip install streamlit google-generativeai +1. **Text and Image Queries**: FlaskGem allows users to make both text and image queries to the Gemini AI platform. +2. **Session Storage**: User queries and corresponding answers are stored in the sessionStorage, ensuring that chats are retained even after page reloads. +3. **Fetch API**: The Fetch API is used to send requests to the Flask server, enabling seamless communication without page reloads. -3. Obtain a Google GenerativeAI API key by signing up for an account and following the instructions provided by Google. -4. Set the API key as an environment variable named `GOOGLE_API_KEY`. +## Getting Started -## Running the Application -### To run the Gemini Bot application:- +### Requirements -1. Navigate to the directory where the `gemini-bot.py` file is located. -2. Run the Streamlit application using the following command:-
-streamlit run gemini-bot.py +- Web browser (Chrome, Firefox, Safari, etc.) +- Internet connection +### Installation -3. The application will start, and you should see the title "Gemini Bot" displayed in your browser. +1. Clone the FlaskGem repository from GitHub. + ```bash + git clone https://github.com/yashksaini-coder/Gemini-Bot + ``` +2. Navigate to the FlaskGem directory. + ```bash + cd Gemini-Bot + ``` +3. Install the packages from requirements.txt + ```bash + pip install -r requirements.txt + ``` +4. Run `python app.py` from your preferred terminal. -## Usage -Once the Gemini Bot application is running, users can interact with the bot by typing their queries or messages into the chat input field provided. +### Usage -### Conversation Flow -1. Upon starting the application, the bot welcomes the user and prompts them to ask a question or start a conversation. -2. Users can type their queries or messages in the chat input field and press Enter to submit. -3. The bot processes the user input and generates a response based on the provided query. -4. The conversation history is displayed in the chat interface, showing messages from both the user and the bot. +1. **Text Queries**: + - Enter your text query in the text input field. + - Press the "Send" button or hit Enter to submit the query. + - View the response from the Gemini AI platform in the chat interface. -### Features -- **Chat Interface**:- The application provides a chat-like interface where users can type messages and receive responses from the bot. -- **Dynamic Interaction**:- The bot dynamically updates the conversation history with each user interaction. -- **Google GenerativeAI Integration**:- Gemini Bot leverages Google's GenerativeAI service to generate responses to user queries. +2. **Image Queries**: + - Click the "Upload Image" button. + - Select an image file from your device. + - Enter your specific query for the image. + - Wait for the response from the Gemini AI platform, which will be displayed in the chat interface. -## Working -- The application utilizes the `google.generativeai` module to interact with the GenerativeAI service. -- User messages and bot responses are stored in the `st.session_state.messages` list to maintain conversation history. -- The `llm_function` method processes user queries, generates responses using the GenerativeAI model, and updates the conversation history. +3. **Session Storage**: + - User queries and responses are stored in sessionStorage. + - This ensures that chats are retained even if the page is reloaded or navigated away from. -## Future Improvements -- Integration with additional conversational AI models for enhanced response generation. -- Implementation of natural language understanding (NLU) techniques to improve the bot's ability to understand user queries. -- Support for multimedia content such as images, videos, and links within the chat interface. -- Adding langchain to provide chat with pdf, text, csv documents. +4. **Fetch API**: + - The Fetch API is used to send requests to the Flask server. + - This communication method avoids page reloads, providing a smoother user experience. -## Conclusion -Gemini Bot provides a simple yet effective platform for engaging in text-based conversations powered by state-of-the-art generative models. By leveraging Streamlit and Google's GenerativeAI service, the application offers a seamless user experience and demonstrates the potential of AI-driven conversational interfaces. +3. **API Key**: + - Please obtain your own API key from the Gemini AI platform at [https://ai.google.dev/](https://ai.google.dev/). + - Replace the placeholder API key in the (`.env`) file with your own API key for proper functionality. \ No newline at end of file From 1e7c0910f0529d169b76700b4418404f6824cbf1 Mon Sep 17 00:00:00 2001 From: yashksaini-coder Date: Wed, 10 Jul 2024 22:45:45 +0530 Subject: [PATCH 04/14] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 8018f47..02237e6 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ ## Introduction -Welcome to FlaskGem, an AI-based web application created using Flask. FlaskGem utilizes the Gemini AI platform to provide text and image query capabilities. This documentation will guide you through the features and usage of FlaskGem. +Welcome to Gemini-Bot, your intelligent companion designed to revolutionize the way you interact with information. Leveraging the power of the Gemini AI platform, Gemini-Bot provides a seamless and intuitive interface for users to make both text and image queries. Whether you're looking for quick answers, detailed explanations, or visual insights, Gemini-Bot is here to assist you. With its advanced features like session storage and the use of the Fetch API for efficient server communication, Gemini-Bot ensures a smooth and engaging user experience. Get ready to explore a world of information at your fingertips with Gemini-Bot. + -![Logo](./static/ai_bot.png) ## Features -1. **Text and Image Queries**: FlaskGem allows users to make both text and image queries to the Gemini AI platform. +1. **Text and Image Queries**: Gemini-Bot allows users to make both text and image queries to the Gemini AI platform. 2. **Session Storage**: User queries and corresponding answers are stored in the sessionStorage, ensuring that chats are retained even after page reloads. 3. **Fetch API**: The Fetch API is used to send requests to the Flask server, enabling seamless communication without page reloads. @@ -19,11 +19,11 @@ Welcome to FlaskGem, an AI-based web application created using Flask. FlaskGem u ### Installation -1. Clone the FlaskGem repository from GitHub. +1. Clone the Gemini-Bot repository from GitHub. ```bash git clone https://github.com/yashksaini-coder/Gemini-Bot ``` -2. Navigate to the FlaskGem directory. +2. Navigate to the Gemini-Bot directory. ```bash cd Gemini-Bot ``` From 81759c8b188266808e9e7ae410ad791e079b84f9 Mon Sep 17 00:00:00 2001 From: yashksaini-coder Date: Wed, 10 Jul 2024 22:46:13 +0530 Subject: [PATCH 05/14] Made file changes --- static/js/app.js | 4 ++-- static/js/image_chat.js | 4 ++-- templates/chats.html | 2 +- templates/image_upload.html | 2 +- templates/index.html | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/static/js/app.js b/static/js/app.js index 61c2608..b1cd0df 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -32,11 +32,11 @@ ask_btn.addEventListener("click", async () => { user_question.innerText = query user_query.append(user_avatar_div, user_question) - // FlaskGem/Gemini part + // Gemini-Bot/Gemini part let gemini_response = document.createElement('div') gemini_response.setAttribute('class', 'gemini') let gemini_avatar_div = document.createElement('div') - gemini_avatar_div.innerHTML = ` FlaskGem` + gemini_avatar_div.innerHTML = ` Gemini-Bot` let gemini_ans = document.createElement('p') gemini_ans.innerHTML = "
Generating your content
" gemini_response.append(gemini_avatar_div, gemini_ans) diff --git a/static/js/image_chat.js b/static/js/image_chat.js index c49714b..cb2c24a 100644 --- a/static/js/image_chat.js +++ b/static/js/image_chat.js @@ -56,11 +56,11 @@ ask_btn.addEventListener("click", async function () { user_question.innerText = query user_query.append(user_avatar_div, user_img_query, user_question) - // FlaskGem/Gemini part + // Gemini-Bot/Gemini part let gemini_response = document.createElement('div') gemini_response.setAttribute('class', 'gemini') let gemini_avatar_div = document.createElement('div') - gemini_avatar_div.innerHTML = ` FlaskGem` + gemini_avatar_div.innerHTML = ` Gemini-Bot` let gemini_ans = document.createElement('p') gemini_ans.innerHTML = "
Generating your content
" gemini_response.append(gemini_avatar_div, gemini_ans) diff --git a/templates/chats.html b/templates/chats.html index 9f1474f..80770d9 100644 --- a/templates/chats.html +++ b/templates/chats.html @@ -28,7 +28,7 @@
- +