added gradio client code

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -2,6 +2,7 @@
 .env
 notebook*/
 venv*/
+pyvenv.cfg
 *.excalidraw
 .vscode*
 .vscode*/

README.md

@@ -2,7 +2,10 @@
 > Where Math Meets Marvel with AI Wizardry for Primary School Prowess! 🧙♂📚✨
 
 ## Introduction
-GuruZee, your go-to guru for primary school math (for now). Picture this. GuruZee whips up question papers with answers and detailed explanations, all based on those elusive course chapter images. Not just that, it's a math-solving maestro, tackling problems presented as images with ease.
+GuruZee, your go-to guru for primary school math (for now).   
+Picture this. GuruZee whips up question papers with answers and detailed explanations, 
+all based on those elusive course chapter images. Not just that, it's a math-solving 
+maestro, tackling problems presented as images with ease.
 
 ## Objectives
 1. Given just an image of primary school math's problem, GuruZee shall produce the 
@@ -10,8 +13,22 @@ solution and clear explanation of the solution.
 2. Given the images of a chapter from primary school maths GuruZee will generate the 
 question paper for various difficulty level based on the content's in the chapter.
 
-## Proposed Architecture
+## How to use
+Solve a problem
+---------------
+- Select/upload an `Image` containing the problem Then hit `GO!` button. Alternatively, 
+just select one of the pre-configured `Example` image from Example section at the 
+bottom. The answer and explanation will appear on the right.
+
+<img src="https://github.com/sssingh/guruzee/blob/main/assets/aap=eample.png?raw=true" width="1000" height="450"/><br><br> 
+
+Prepare questions and answers
+-----------------------------
+WIP (work in progress)
+- Select/upload an `Image` containing the problem Then hit `GO!` button. Alternatively, 
+just select one the pre-configured `Example` image from Example section in the bottom.
+The answer and explanation will appear on the right.
+
+## App Architecture
 [TODO]
 
-## How to use
-[TODO]

requirements.txt

@@ -1,2 +1,6 @@
 fastapi
-requests
+uvicorn
+requests
+pymongo[tls, srv]==4.4.*
+gradio==3.45.*
+python-dotenv

src/app_config.py

@@ -1,10 +1,40 @@
+import os
+from dotenv import load_dotenv
 from dataclasses import dataclass
 
+# load environment variables from .env (only available in dev environment)
+load_dotenv()
+
 
 @dataclass
 class __AppConfig:
-    openai_api_endpoint = "https://api.openai.com/v1/chat/completions"
-    openai_api_key = ""
+    solver_persona = """You an expert primary school maths teacher. Given an 
+            image of a primary school maths problem you can analyze the problem and 
+            produce a detailed solution with explanation."""
+    teacher_persona = (
+        solver_persona
+        + """ \nIn addition to this, given a
+            collection images from primary school maths text book you can generate
+            questions and there answers based on the topic shown in text book images,
+            you will provide the detailed answers with explanation"""
+    )
+    solver_instruction = """Analyze the primary school math problem in the the image. 
+            Strictly first provide the answer to the problem and then only the solution 
+            explanation. Put a newline after each 80 chars"""
+    openai_max_access_count = 200
+    openai_curr_access_count = None
+    mongo_client = None
+    db = "mydb"
+    collection = "guruzee-openai-access-counter"
+    key = "current_count"
+    OPENAI_API_ENDPOINT = os.getenv("OPENAI_API_ENDPOINT")
+    GURUZEE_API_ENDPOINT = os.getenv("GURUZEE_API_ENDPOINT")
+    OPENAI_KEY = os.getenv("OPENAI_KEY")
+    HF_TOKEN = os.getenv("HF_TOKEN")
+    MONGO_CONN_STR = os.getenv("MONGO_CONN_STR")
+    title = "GuruZee, your go-to guru for primary school math"
+    theme = "freddyaboulton/dracula_revamped"
+    css = "style.css"
 
 
 config = __AppConfig()

src/client.py

@@ -1 +1,167 @@
-## Test code for testing the server API goes here
+import base64
+import requests
+from app_config import config
+import gradio as gr
+import mongo_utils as mongo
+
+
+def clear():
+    return None, ""
+
+
+# Function to encode the local image into base64 to be send over HTTP
+def __encode_image(image_path: str) -> bytes:
+    """
+    Encodes the passed image to base64 byte-stream.
+    This is required for passing the image over a HTTP get/post call.
+    """
+    with open(image_path, "rb") as image_file:
+        base64_image = base64.b64encode(image_file.read()).decode("utf-8")
+    return base64_image
+
+
+def solve(image_path: str):
+    """
+    Invokes the GuruZee API passing the raw image bytes and returns the response
+    to client
+    """
+    print(image_path)
+    image_data = __encode_image(image_path=image_path)
+    headers = {"Content-Type": "application/json"}
+    payload = {"data": image_data}
+    response = requests.post(config.GURUZEE_API_ENDPOINT, headers=headers, json=payload)
+    return response.json()
+
+
+def create_interface():
+    js_enable_darkmode = """() => 
+    {
+        document.querySelector('body').classList.add('dark');
+    }"""
+    js_toggle_darkmode = """() => 
+    {
+        if (document.querySelectorAll('.dark').length) {
+            document.querySelector('body').classList.remove('dark');
+        } else {
+            document.querySelector('body').classList.add('dark');
+        }
+    }"""
+
+    with gr.Blocks(title=config.title, theme=config.theme, css=config.css) as app:
+        # enable darkmode
+        app.load(fn=None, inputs=None, outputs=None, _js=js_enable_darkmode)
+        with gr.Row():
+            darkmode_checkbox = gr.Checkbox(
+                label="Dark Mode", value=True, interactive=True
+            )
+            # toggle darkmode on/off when checkbox is checked/unchecked
+            darkmode_checkbox.change(
+                None, None, None, _js=js_toggle_darkmode, api_name=False
+            )
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown(
+                    """
+                    # GuruZee
+                    ***Where Math Meets Marvel with AI Wizardry for Primary School 
+                    Prowess! 🧙♂📚✨***
+                    **GuruZee whips up question papers with answers and detailed 
+                    explanations, all based on those elusive course chapter images. 
+                    Not just that, it's a math-solving maestro, tackling problems 
+                    presented as images with ease..  
+                    <br>
+                    Select/upload an `Image` containing the problem Then hit 
+                    `GO!` button.
+                    Alternatively, just select one the pre-configured `Example` image 
+                    from Example section in the bottom**  
+                    <br>
+                    Visit the [project's repo](https://github.com/sssingh/GuruZee)  
+                    <br>
+                    ***Please exercise patience, as the models employed are extensive 
+                    and may require a few seconds to load. If you encounter an unrelated 
+                    response, it is likely still loading; wait a moment and try again.***
+                    """
+                )
+            with gr.Column():
+                max_count = gr.Textbox(
+                    label="Max allowed OpenAI requests:",
+                    value=config.openai_max_access_count,
+                )
+                curr_count = gr.Textbox(
+                    label="Used up OpenAI requests:",
+                    value=config.openai_curr_access_count,
+                )
+                available_count = gr.Textbox(
+                    label="Available OpenAI requests:",
+                    value=config.openai_max_access_count
+                    - config.openai_curr_access_count,
+                )
+        with gr.Row():
+            with gr.Column():
+                image = gr.Image(
+                    type="filepath",
+                )
+                with gr.Row():
+                    submit_button = gr.Button(value="GO!", elem_classes="orange-button")
+                    clear_button = gr.ClearButton(elem_classes="gray-button")
+            with gr.Column():
+                answer = gr.Textbox(
+                    label="Answer:",
+                    placeholder="Answer will appear here.",
+                    lines=20,
+                )
+        with gr.Row():
+            with gr.Accordion("Expand for examples:", open=False):
+                gr.Examples(
+                    examples=[
+                        [
+                            "assets/examples/1.png",
+                        ],
+                        [
+                            "assets/examples/2.png",
+                        ],
+                        [
+                            "assets/examples/3.png",
+                        ],
+                        [
+                            "assets/examples/4.png",
+                        ],
+                        [
+                            "assets/examples/5.png",
+                        ],
+                        [
+                            "assets/examples/6.png",
+                        ],
+                        [
+                            "assets/examples/7.png",
+                        ],
+                        [
+                            "assets/examples/8.png",
+                        ],
+                        [
+                            "assets/examples/9.png",
+                        ],
+                        [
+                            "assets/examples/10.png",
+                        ],
+                    ],
+                    fn=solve,
+                    inputs=[image],
+                    outputs=[answer],
+                    run_on_click=True,
+                )
+        submit_button.click(
+            fn=solve,
+            inputs=[image],
+            outputs=[answer],
+        )
+        clear_button.click(fn=clear, inputs=[], outputs=[image, answer])
+        image.clear(fn=clear, inputs=[], outputs=[image, answer])
+
+    return app
+
+
+if __name__ == "__main__":
+    mongo.fetch_curr_access_count()
+    app = create_interface()
+    app.launch()

src/mongo_utils.py

@@ -0,0 +1,57 @@
+import pymongo
+from app_config import config
+
+
+# Generic functions
+def get_db_client():
+    """Returns MongoDB client object, connect to MongoDB Atlas instance if required"""
+    try:
+        if config.mongo_client == None:
+            client = pymongo.MongoClient(config.MONGO_CONN_STR)
+            config.mongo_client = client
+    except Exception as e:
+        print(e)
+    return config.mongo_client
+
+
+def fetch_document(client, db, collection):
+    """Get a single document from the provided db and collection"""
+    try:
+        document = client[db][collection].find_one()
+    except Exception as e:
+        print(e)
+    return document
+
+
+def update_document(client, db, collection, key, value):
+    """Update the passed key in the document for provided db and collection"""
+    try:
+        document = fetch_document(client, db, collection)
+        client[db][collection].update_one(
+            {"_id": document["_id"]},
+            {"$set": {key: value}},
+        )
+    except Exception as e:
+        print(e)
+
+
+# Use case specific functions
+def fetch_curr_access_count():
+    client = get_db_client()
+    curr_count = fetch_document(
+        client=client, db=config.db, collection=config.collection
+    )[config.key]
+    config.openai_curr_access_count = curr_count
+
+
+def increment_curr_access_count():
+    client = get_db_client()
+    updated_count = config.openai_curr_access_count + 1
+    update_document(
+        client=client,
+        db=config.db,
+        collection=config.collection,
+        key=config.key,
+        value=updated_count,
+    )
+    config.openai_curr_access_count = updated_count

src/server.py

@@ -1,43 +1,37 @@
-import base64
 import requests
 from app_config import config
+from fastapi import FastAPI
+from pydantic import BaseModel
 
+guruzee = FastAPI()
 
-# Function to encode the local image into base64 to be send over HTTP
-def local_image_to_url(image_path):
-    with open(image_path, "rb") as image_file:
-        base64_image = base64.b64encode(image_file.read()).decode("utf-8")
-    return {"url": f"data:image/jpeg;base64,{base64_image}"}
 
+class SingleImageData(BaseModel):
+    data: str
 
-def analyze_single_image(image_path: str, instruction: str, mode="url"):  # "local"
-    if mode == "local":
-        image_path = local_image_to_url(image_path)
+
+def __analyze_single_image(image_data: str):
+    """
+    Sends the user supplied image with system instructions to GPT-4, returns the
+    received response in JSON format.
+    """
+    image_data = {"url": f"data:image/jpeg;base64,{image_data}"}
     headers = {
         "Content-Type": "application/json",
-        "Authorization": f"Bearer {config.openai_api_key}",
+        "Authorization": f"Bearer {config.OPENAI_KEY}",
     }
     payload = {
         "model": "gpt-4-vision-preview",
-        "temperature": 0.2,
+        "temperature": 0.2,  # low temperature because we want deterministic responses
         "messages": [
-            {
-                "role": "system",
-                "contents": """You an expert primary school maths teacher. Given an image 
-             of a primary school maths problem you can analyze the problem and produce
-             a detailed solution with explanation."""
-                # In addition to this, given a
-                # collection images from primary school maths text book you can generate
-                # questions and there answers based on the topic shown in text book images,
-                # you will provide the detailed answers with explanation""",
-            },
+            {"role": "system", "content": config.solver_persona},
             {
                 "role": "user",
                 "content": [
-                    {"type": "text", "text": instruction},
+                    {"type": "text", "text": config.solver_instruction},
                     {
                         "type": "image_url",
-                        "image_url": image_path,
+                        "image_url": image_data,
                     },
                 ],
             },
@@ -45,16 +39,15 @@ def analyze_single_image(image_path: str, instruction: str, mode="url"):  # "loc
         "max_tokens": 600,
     }
 
-    response = requests.post(config.openai_api_endpoint, headers=headers, json=payload)
+    response = requests.post(config.OPENAI_API_ENDPOINT, headers=headers, json=payload)
     return response.json()
 
 
-def solve(problem_image: str, mode="local"):
-    print("P R O B L E M:\n--------------")
-    display(Image(filename=problem_image))  # only in notebook
-    instruction = """Analyze the 4th grade math problem in the image. Strictly first provide the answer to the problem and then only the solution explanation. 
-    Put a newline after each 80 chars"""
-    output = analyze_image(problem_image, instruction, mode)
-    print("A N S W E R:\n------------")
-    print(output["choices"][0]["message"]["content"])
+@guruzee.post("/solve")
+async def solve(image: SingleImageData):
+    """
+    Invokes the OpenAI API passing the raw image bytes and returns the
+    response to client
+    """
+    output = __analyze_single_image(image.data)
     return output["choices"][0]["message"]["content"]

src/style.css

@@ -0,0 +1,11 @@
+.orange-button {
+  background-color: orange !important;
+}
+
+.gray-button {
+  background-color: #5e6061 !important;
+}
+
+footer {
+  visibility: hidden;
+}