Building a Generate Text with Gemini Pro: A Guide

3 min readJan 30, 2024

Introduction

In this tutorial, we explore this Generate Text utilizes the powerful Gemini API to deliver a dynamic and responsive user experience. This guide is designed for developers interested in chatbot development using modern tools and technologies.

Prerequisites

Basic knowledge in HTML, JS, and CSS
Already install python and pip
You have a basic understanding of Python programming. Nah i mean you must be enthusiast in python programming and ai stuff :D

Step 1: Create HTML Template

create an HTML file, e.g., index.html. This file will be the frontend of your chatbot.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gemini Pro</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container bg-white rounded-lg shadow-md">
    <h1 class="text-3xl font-bold mb-4 text-center">ChatBot</h1>
    <div class="chat" id="chatContainer">
    </div>
    <div class="flex">
      <input type="text" id="userInput" placeholder="Type your message here..." class="outline-none"
        onkeyup="handleKeyPress(event)">
      <button class="send-button" onclick="sendMessage()">Send</button>
    </div>
    <div class="typing-indicator" id="typingIndicator">
    </div>
  </div>

  <div class="footer">
    &copy; 2024 <span class="hover:underline"><a target="_blank"
        href="https://github.com/fitriadyaa/GenerateText_Gemini">ChatBot Gemini Pro Teams.</a></span> All rights
    reserved.
  </div>

  <script src="script.js"></script>
</body>

</html>

Step 2: Install Required Libraries

Install Flask, google.generativeai and python-dotenv

pip install flask

pip install google-cloud-aiplatform

pip install python-dotenv

Then create a .env file and populate it with the API_KEY

API_KEY=your gemini key

Step 3: Setup Gemini API Key

Visit the Generative AI Studio Page.

Click “Get API Key”
And create your own API Key
Then paste it on your .env file

Step 4: Create Flask App

Create a new Python file, e.g., app.py, to hold your Flask application.

Import the necessary dependencies, get API KEY from .env

import os

import google.generativeai as genai
from flask import Flask, Response, jsonify, request, stream_with_context
from flask_cors import CORS
from dotenv import load_dotenv

load_dotenv()

genai.configure(api_key = os.environ.get('API_KEY'))

app = Flask(__name__)
CORS(app)

Initialize the flask application as well as the generative AI model and add safety setting is a dictionary containing how filtered the content should be based on the category.

app = Flask(__name__)
CORS(app)

# Set up the model
generation_config = {
    "temperature": 0.9,
    "top_p": 1,
    "top_k": 1,
    "max_output_tokens": 4096,
}

safety_settings = [
    {
        "category": "HARM_CATEGORY_HARASSMENT",
        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
        "category": "HARM_CATEGORY_HATE_SPEECH",
        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
        "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
        "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    }
]

Next, create the routing for the flask app

@app.route("/")
def index():
    return jsonify({
        "status": {
            "code": 200,
            "message": "Success fetching the API"
        },
        "data": None,
    }), 200

The last one is create generate text stream function

@app.route("/generate_text_stream", methods=["GET", "POST"])
def generate_text_stream():
    if request.method == "POST":
        input_data = request.get_json()
        prompt = input_data["prompt"]
        model = genai.GenerativeModel(model_name="gemini-pro",
                                      generation_config=generation_config,
                                      safety_settings=safety_settings)

        def generate_stream():
            response = model.generate_content(prompt, stream=True)
            for chunk in response:
                print(chunk.text)
                yield chunk.text + "\n"

        return Response(stream_with_context(generate_stream()), mimetype="text/plain")
    else:
        return jsonify({
            "status": {
                "code": 405,
                "message": "Method not allowed"
            },
            "data": None
        }), 405

Step 6: Run the Flask application from the terminal

In the terminal, run your Flask app: python app.py

python app.py

Step 7: Add Endpoint

Integrate the chatbot’s front-end with the Flask backend by updating the script to communicate with your Flask server.

const response = await fetch("your port 0.0.0.0/generate_text_stream", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ prompt }),
    });

    if (!response.ok) {
      console.error("Error:", response.statusText);
      return "Error occurred while generating response.";
    }

Conclusion

By following these steps, you’ve created a responsive and intelligent chatbot. This is just the beginning — the possibilities for further enhancements are limitless.

Source

Demo Web : https://generate-text-gemini.vercel.app/
Repository : https://github.com/fitriadyaa/GenerateText_Gemini