Constructing a Meals Imaginative and prescient WebApp with the Gemini Flash 1.5 Mannequin

Introduction

On this fast-changing panorama of AI, effectivity and scalability change into paramount. Builders are actively reaching out to these fashions that present excessive efficiency at a lowered value with decrease latency and higher scalability. Enter Gemini Flash 1.5 a brand new launch that retains all the good options of Gemini 1.1 and provides even higher efficiency for a lot of image-related duties. Particularly, As part of the Gemini 1.5 launch, which additionally consists of the Gemini 1.5 Professional variant, Flash 1.5 stands out as a mannequin to make quick, environment friendly, and high-volume duties doable. Now, let’s take into account the significance of Gemini Flash 1.5 on this weblog and make a Meals Imaginative and prescient WebApp with Flask.

Studying Outcomes

• Perceive the important thing options and efficiency enhancements of Gemini Flash 1.5.
• Learn to combine and use the Gemini Flash 1.5 mannequin in a Flask internet utility.
• Achieve insights into the significance of light-weight AI fashions for high-volume duties.
• Uncover the method of making a Meals Imaginative and prescient WebApp utilizing Flask and Gemini Flash 1.5.
• Discover the steps for configuring and utilizing Google AI Studio’s Gemini Flash 1.5.
• Establish the advantages of utilizing JSON schema mode for structured AI mannequin outputs.

This text was revealed as part of the Information Science Blogathon.

Want for Light-weight AI Fashions

With the mixing of AI into completely different industries, quick and environment friendly fashions to course of excessive quantities of information are subsequently wanted. Conventional AI fashions are very resource-intensive, often excessive in latency, and low in scaling. This creates an enormous problem, particularly to builders engaged on purposes that require real-time responses or that are field-deployed on resource-constrained environments akin to cell units or edge computing platforms.

Recognizing these challenges, Google launched the Gemini Flash 1.5 mannequin—a light-weight AI answer tailor-made to satisfy the wants of contemporary builders. Gemini Flash 1.5 is designed to be cost-efficient, quick, and scalable, making it a really perfect selection for high-volume duties the place efficiency and price are important issues.

Key Options of Gemini Flash 1.5

• Enhanced Efficiency and Scalability: Some of the important updates in Gemini Flash 1.5 is its give attention to efficiency and scalability. Google has elevated the speed restrict for Gemini Flash 1.5 to 1000 requests per minute (RPM), a considerable enchancment that enables builders to deal with extra important workloads with out compromising on velocity. Moreover, the elimination of the every day request restrict additional enhances its usability, enabling steady processing with out interruptions.
• Tuning Help: Customization and flexibility are key parts of profitable AI implementations. To help this, Google is rolling out tuning help for Gemini Flash 1.5, permitting builders to fine-tune the mannequin to satisfy particular efficiency thresholds. Tuning is supported each in Google AI Studio and straight by way of the Gemini API. This characteristic is especially helpful for builders trying to optimize the mannequin for area of interest purposes or particular information units. Importantly, tuning jobs are freed from cost, and utilizing a tuned mannequin doesn’t incur further per-token prices, making it a gorgeous choice for cost-conscious builders.

• JSON Schema Mode: One other notable characteristic in Gemini Flash 1.5 is the introduction of JSON schema mode. This mode provides builders extra management over the mannequin’s output by permitting them to specify the specified JSON schema. This flexibility is essential for purposes that require structured output, akin to information extraction, API responses, or integration with different programs. By conforming to a specified schema, Gemini Flash 1.5 may be seamlessly built-in into current workflows, enhancing its versatility.

Getting Began with Flask

Flask is a light-weight micro internet framework that enables builders to construct internet purposes utilizing Python. It’s known as a “micro” framework as a result of it doesn’t require loads of setup or configuration, in contrast to different frameworks like Django. Flask is ideal for constructing small to medium-sized internet purposes, prototyping, and even large-scale purposes with the precise structure.

Key Options of Flask

• Light-weight: Flask has a small codebase and doesn’t require loads of dependencies, making it straightforward to study and use.
• Versatile: Flask can be utilized for constructing a variety of internet purposes, from easy internet pages to complicated internet providers.
• Modular: Flask has a modular design, making it straightforward to increase and customise.
• Unit Testing: Flask has built-in help for unit testing, making it straightforward to write down and run assessments.

Getting Began with Flask

Flask is a light-weight micro internet framework that enables builders to construct internet purposes utilizing Python. It’s good for constructing small to medium-sized internet purposes, prototyping, and even large-scale purposes with the precise structure.

Key Options of Flask

• Light-weight: Small codebase with minimal dependencies, straightforward to study and use.
• Versatile: Appropriate for a variety of internet purposes.
• Modular: Straightforward to increase and customise.
• Unit Testing: Constructed-in help for unit testing.

Flask App Instance

from flask import Flask

app = Flask(__name__)

@app.route("https://www.analyticsvidhya.com/")
def hello_world():
    return "<p>Good day, World!</p>"
    
if __name__ == "__main__":
    app.run(debug=True)

Output:

Learn the Flask Documentation for extra particulars

Meals Imaginative and prescient WebApp: Overview of Venture Group

The Meals Imaginative and prescient WebApp is organized into a number of key parts: a digital setting folder (myenv/), static information for frontend property (static/), HTML templates (templates/), and a fundamental utility file (app.py). The .env file shops delicate configuration particulars. This construction ensures a clear separation of considerations, making the challenge simpler to handle and scale.

Folder Construction

This part outlines the folder construction of the Meals Imaginative and prescient WebApp, detailing the place numerous parts are positioned. Understanding this group is essential for sustaining and increasing the appliance effectively.

myenv/             # folder for digital setting
│
static/            # Folder for static information
│   ├── scripts.js
│   └── types.css
│
templates/         # Folder for HTML templates
│   └── index.html
│
.env               # Atmosphere variables file
app.py             # Foremost utility file

Create a Digital Atmosphere

Making a digital setting ensures that your challenge dependencies are remoted from the worldwide Python setting. Observe these steps to arrange and activate a digital setting for the Meals Imaginative and prescient WebApp.

python -m venv myenv

Activate in Home windows (Command Immediate)

.myenvScriptsactivate

Activating in Home windows (PowerShell)

.myenvScriptsActivate.ps1

Activate in macOS/Linux (Bash/Zsh)

supply myenv/bin/activate

Set up these Dependencies 

Set up the required Python packages to run the Meals Imaginative and prescient WebApp successfully. These dependencies embrace libraries for internet growth, picture processing, and setting administration.

pip set up google-generativeai	
pip set up flask
pip set up pillow
pip set up python-dotenv

HTML Template: Designing the Person Interface

The HTML template offers the construction for the Meals Imaginative and prescient WebApp’s front-end. This part covers the structure, file add kind, and placeholders for displaying the uploaded picture and outcomes.

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="viewport" content material="width=device-width, initial-scale=1.0">
    <title>Nutrify</title>
    <hyperlink rel="stylesheet" href="https://www.analyticsvidhya.com/weblog/2024/08/building-a-food-vision-webapp-with-the-gemini-flash-1-5-model/{{ url_for("static', filename="types.css") }}">
    <script src="https://www.analyticsvidhya.com/weblog/2024/08/building-a-food-vision-webapp-with-the-gemini-flash-1-5-model/{{ url_for("static', filename="scripts.js") }}" defer></script>
</head>
<!-- templates/index.html -->
    <physique>
        <div class="container">
            <div class="upload-section">
                <div class="upload-form">
                    <h2>Add a file</h2>
                    <p>Connect the file under</p>
                    <kind id="uploadForm" technique="put up" enctype="multipart/form-data">
                        <div class="upload-area" id="uploadArea">
                            <enter kind="file" id="uploadInput" title="uploadInput" settle for=".jpg, .jpeg, .png" required>
                            <label for="uploadInput">Drag file(s) right here to add.<br>Alternatively, you'll be able to choose a file by <a href="#" onclick="doc.getElementById('uploadInput').click on(); return false;">clicking right here</a></label>
                        </div>
                        <div id="fileName" class="file-name"></div>
                        <button kind="submit" id="submitBtn">Add File</button>
                    </kind>
                    <div id="loadingIndicator" type="show: none;">
                        <div class="spinner"></div>
                        <p>Loading...</p>
                    </div>
                </div>
                <div id="imageDisplay" class="image-display"></div>
            </div>
            <div id="responseOutput" class="response-output"></div>
        </div>
  
    
</physique>
</html>

CSS: Styling the WebApp

The CSS file enhances the visible presentation of the Meals Imaginative and prescient WebApp. It consists of types for structure, buttons, loading indicators, and responsive design to make sure a seamless consumer expertise.

physique {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    coloration: #333;
    overflow-y: auto; /* Permits scrolling as wanted */
    min-height: 100vh; /* Ensures at the least full viewport top */
    show: flex;
    flex-direction: column; /* Adjusts path for content material circulate */
}
.center-container {
    show: flex;
    align-items: middle;
    justify-content: middle;
    flex-grow: 1; /* Permits the container to broaden */
}

.container {
    show: flex;
    flex-direction: column;
    justify-content: middle;
    align-items: middle;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    flex-grow: 1;
    box-sizing: border-box; /* Add this line */
}

.upload-section {
    show: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.upload-form {
    width: 48%;
}

.image-display {
    width: 48%;
    text-align: middle;
}

h2 {
    coloration: #444;
    margin-bottom: 10px;
}

p {
    margin-bottom: 20px;
    coloration: #666;
}

/* Add space types */
.upload-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.upload-area enter[type="file"] {
    show: none;
}

.upload-area label {
    show: block;
    coloration: #666;
    cursor: pointer;
}

.upload-area a {
    coloration: #007bff;
    text-decoration: none;
}

.upload-area a:hover {
    text-decoration: underline;
}

.file-name {
    margin-bottom: 20px;
    font-weight: daring;
    coloration: #444;
}

/* Button types */
button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, remodel 0.2s ease;
    background-color: #007bff;
    coloration: #fff;
}

button:hover {
    background-color: #0056b3;
    remodel: translateY(-2px);
}

/* Loading indicator types */
#loadingIndicator {
    show: none;
    text-align: middle;
    margin-top: 20px;
}

.spinner {
    border: 4px strong rgba(0, 0, 0, 0.1);
    border-top: 4px strong #007bff;
    border-radius: 50%;
    width: 40px;
    top: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { remodel: rotate(0deg); }
    100% { remodel: rotate(360deg); }
}

/* Picture show types */
#imageDisplay img {
    max-width: 100%;
    top: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Response output types */
.response-output {
    width: 100%;
}

#responseOutput {
    text-align: left;
    margin-top: 20px;
}

#responseOutput h2 {
    coloration: #333;
    margin-bottom: 10px;
    font-size: 1.5em;
}

#responseOutput pre {
    white-space: pre-wrap;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px strong #ddd;
    border-radius: 8px;
    font-size: 1em;
}

Flask Utility (app.py)

The app.py file powers the Meals Imaginative and prescient WebApp by managing routes and dealing with picture uploads. It integrates with the Gemini Flash 1.5 mannequin to offer dietary evaluation and responses.

Step1: Setting Up Important Libraries

This part imports the required libraries and modules for the Flask utility. These embrace Flask for internet growth, google.generativeai for interacting with the Gemini API, and PIL for picture processing.

from flask import Flask,render_template,request, redirect, url_for,jsonify
import google.generativeai as genai
from PIL import Picture
import base64
import io
import os

Step2: Gemini API Configuration

Right here, you configure the Gemini AI library utilizing your API key. This setup ensures that the appliance can talk with the Gemini API to course of picture information and generate dietary data.

my_api_key_gemini = os.getenv('GOOGLE_API_KEY')
genai.configure(api_key=my_api_key_gemini)

Step3: Getting the API Key

Receive your API key from the Google AI Studio. This secret’s essential for authenticating requests to the Gemini API.

Go to Google AI Studio right here and get your API key.

Step4: Retailer Your API key in .env file

Save your API key in a .env file to maintain it safe and simply accessible. The appliance retrieves the important thing from this file to configure the Gemini API.

GOOGLE_API_KEY="Your_API_KEY"

• my_api_key_gemini = os.getenv(‘GOOGLE_API_KEY’): This retrieves your Google API key from an setting variable named GOOGLE_API_KEY.
• genai.configure(api_key=my_api_key_gemini): This configures the Gemini AI library to make use of your API key for making requests.

Step5: Creating routes

On this step, you create the routes for the Flask utility. These routes deal with requests and responses, together with rendering the homepage and processing file uploads.

app = Flask(__name__)

@app.route("https://www.analyticsvidhya.com/")
def index():
    return render_template('index.html')

Step6: Creating Flask Route

Making a well-structured Flask route for dealing with a picture add, processing it, and sending it to the Gemini Flash 1.5.

@app.route('/add', strategies=['POST'])
def add():
    uploaded_file = request.information['uploadInput']
    
    if uploaded_file:
        picture = Picture.open(uploaded_file)
        
        # Guarantee appropriate mime kind primarily based on file extension
        if uploaded_file.filename.endswith('.jpg') or uploaded_file.filename.endswith('.jpeg'):
            mime_type="picture/jpeg"
        elif uploaded_file.filename.endswith('.png'):
            mime_type="picture/png"
        else:
            return jsonify(error="Unsupported file format"), 400
        
        # Encode picture to base64 for sending to API
        buffered = io.BytesIO()
        picture.save(buffered, format=picture.format)
        encoded_image = base64.b64encode(buffered.getvalue()).decode('utf-8')

        image_parts = [{
            "mime_type": mime_type,
            "data": encoded_image
        }]
        
        input_prompt = """
            You're an skilled in nutritionist the place you might want to see the meals objects from the picture
            and calculate the full energy, additionally present the small print of each meals objects with energy consumption
            is under format

            1. Merchandise 1 - no of energy, protein
            2. Merchandise 2 - no of energy, protein
            ----
            ----
            Additionally point out illness danger from these things
            Lastly you may also point out whether or not the meals objects are wholesome or not and Counsel Some Wholesome Various 
            is under format          
            1. Merchandise 1 - no of energy, protein
            2. Merchandise 2 - no of energy, protein
            ----
            ----
        """

        # Simulate API response 
        model1 = genai.GenerativeModel('gemini-1.5-flash')
        response = model1.generate_content([input_prompt, image_parts[0]])
        outcome = response.textual content

        return jsonify(outcome=outcome, picture=encoded_image)
    
    return jsonify(error="No file uploaded"), 400

Step7: Operating the Utility

Execute the Flask app with app.run(debug=True) to begin the server. This offers an area growth setting the place you’ll be able to check and debug the appliance.

from flask import Flask,render_template,request, redirect, url_for,jsonify
import google.generativeai as genai
from PIL import Picture
import base64
import io
import os
my_api_key_gemini = os.getenv('GOOGLE_API_KEY')
genai.configure(api_key=my_api_key_gemini)
app = Flask(__name__)

@app.route("https://www.analyticsvidhya.com/")
def index():
    return render_template('index.html')

@app.route('/add', strategies=['POST'])
def add():
    uploaded_file = request.information['uploadInput']
    
    if uploaded_file:
        picture = Picture.open(uploaded_file)
        
        # Guarantee appropriate mime kind primarily based on file extension
        if uploaded_file.filename.endswith('.jpg') or uploaded_file.filename.endswith('.jpeg'):
            mime_type="picture/jpeg"
        elif uploaded_file.filename.endswith('.png'):
            mime_type="picture/png"
        else:
            return jsonify(error="Unsupported file format"), 400
        
        # Encode picture to base64 for sending to API
        buffered = io.BytesIO()
        picture.save(buffered, format=picture.format)
        encoded_image = base64.b64encode(buffered.getvalue()).decode('utf-8')

        image_parts = [{
            "mime_type": mime_type,
            "data": encoded_image
        }]
        
        input_prompt = """
            You're an skilled in nutritionist the place you might want to see the meals objects from the picture
            and calculate the full energy, additionally present the small print of each meals objects with energy consumption
            is under format

            1. Merchandise 1 - no of energy, protein
            2. Merchandise 2 - no of energy, protein
            ----
            ----
            Additionally point out illness danger from these things
            Lastly you may also point out whether or not the meals objects are wholesome or not and Counsel Some Wholesome Various 
            is under format          
            1. Merchandise 1 - no of energy, protein
            2. Merchandise 2 - no of energy, protein
            ----
            ----
        """

        # Simulate API response (substitute with precise API name)
        model1 = genai.GenerativeModel('gemini-1.5-flash')
        response = model1.generate_content([input_prompt, image_parts[0]])
        outcome = response.textual content

        return jsonify(outcome=outcome, picture=encoded_image)
    
    return jsonify(error="No file uploaded"), 400

if __name__ == "__main__":
    app.run(debug=True)         

Output:

The output can be a JSON response containing the dietary evaluation and well being suggestions primarily based on the uploaded meals picture. The evaluation consists of particulars like energy, protein content material, potential well being dangers, and ideas for more healthy alternate options.

Get the code from my GitHub Repo: right here.

Conclusion

Gemini Flash 1.5 advances the state of AI fashions by addressing core necessities with enhanced velocity, effectivity, and scalability. It goals to satisfy the calls for of right this moment’s fast-moving digital world. Armed with fairly a couple of highly effective efficiency options, versatile tuning help, and broadened scope in textual content, picture, and structured information duties, Gemini Flash 1.5 empowers builders to construct extremely inventive AI options with energy and cost-effectiveness. It’s light-weight, excessive in quantity for processing; therefore, it serves as an excellent selection for real-time cell apps and huge enterprise programs.

Key Takeaways

• Gemini Flash 1.5 optimizes high-volume duties. It options quick processing, with as many as 1000 requests per minute, making it fairly ultimate for purposes that require real-time responses.
• It offers tuning help in order that builders can additional tune the mannequin to satisfy particular necessities with out incurring additional value, therefore making it adaptable to be used circumstances.
• It now helps textual content, JSON, and pictures, so Gemini Flash 1.5 can do the whole lot from picture classification to structured information output.
• Google AI Studio offers an accessible platform for integrating and managing Gemini Flash 1.5, with options like JSON schema mode and cell help enhancing the general developer expertise.
• The elimination of the every day request restrict and the power to deal with a lot of requests per minute make Gemini Flash 1.5 appropriate for scalable purposes, from cell apps to large-scale enterprise options.

Steadily Requested Questions 

The media proven on this article isn’t owned by Analytics Vidhya and is used on the Writer’s discretion.