Client with AI #

In this lab you will create a frontend client for your Networking backend project. We will use Gemini to help develop a quick prototype.

[0] Set Up #

💻 First, clone the repository in your unit03_networking folder. Be sure to change yourgithubusername to your actual Github username.

cd ~/desktop/making_with_code/unit03_networking/
git clone https://github.com/the-isf-academy/lab_client_ai_yourgithubusername
cd lab_client_ai_yourgithubusername

💻 Get the necessary packages

poetry install

💻 Enter the Poetry shell

poetry shell

[1] Understanding AI Code #

Our goal is to create a GUI for a riddle guessing game that accesses the riddle server at http://sycs.student.isf.edu.hk/riddle.

Your goal is to create a GUI to interact with the Riddle server. It should look similar to this with all buttons working as expected:

🤖 In Gemimi write a prompt to create a GUI. You may use the suggestion prompt below or write your own prompt.

Can you please create a Python client application using Tkinter. It will interact with an API at this base url: http://sycs.student.isf.edu.hk/riddle

Here is the is information on the available endpoints:

{
    "GET /all": {
        "description": "Returns a list of all riddles ",
        "payload": "none"
    },
    "POST /new": {
        "description": "Add a new riddle to the db ",
        "payload": "question: str, answer: str"
    },
    "PUT /guess": {
        "description": "Guess the answer to a riddle with a given id",
        "payload": "id: int, guess: str"
    }
}

💻 Copy & Paste the entirety of the AI generated code into client_ai.py.

💻 Run client_ai.py to test it.

✅ CHECKPOINT:
Were you successful? Why or why not?
If you were successful,
did you tweak the code?
did you tweak the prompt?

Improving the prompt #

🤔 If you were unsuccessful, can you figure out which function is causing the error?

🤖 Improve the prompt by instructing Gemimi to use a specific function that will fix the bug. Take a peak at the suggested prompt if you need a hint. Feel free to include additional suggestions of certain function not to use to make the code more readable for you.

Suggested Addition ↕

For the Requests library, be sure to only use params=payload.

💻 Copy & Paste the entirety of the new AI generated code into client_ai.py.

💻 Run client_ai.py to test it.

✅ CHECKPOINT:
A few questions to consider:
Did the improved prompt result in a GUI that works immediately? Why might this be?
If the improved prompt did not generate a working GUI, why might it have failed?
How would you assess the AI code?

Improving the GUI #

Hopefully by now your GUI works and displays information! However, it is probably still formatted as JSON. Ideally, our GUI should be parsed, ensuring it is easy to read. Data parsing is converting raw, unstructured into a more readable format.

💻 Either use targeted AI prompts to fix the formatting OR parse the JSON yourself. Use the helpful prompt below or experiment on your own.

Helpful prompt ↕

Here is an example of a helpful prompt to edit specific endpoints.

For the get_all_riddles() function, please parse the json response. Here is an excerpt of it:

{

    "riddles": [

        {

            "correct_guesses": 11,

            "id": 1,

            "question": "Which letter of the alphabet has the most water?",

            "total_guesses": 34

        },

Here is an example of parsed JSON

💻 Ensure each function in your GUI includes easy to read, parses JSON

✅ CHECKPOINT:
A few questions to consider:
Do you like or dislike the AI parsing?
What are advantages and disadvantages to using AI for data parsing?

[2] Deliverables #

⚡✨
Once you’ve successfully completed the worksheet be sure to fill out this Google form.
💻 Push your work to Github:
git status
git add -A
git status
git commit -m “describe your code and your process here”
be sure to customize this message, do not copy and paste this line
git push

[3] Extension: Creating a Game #

Let’s consider alternate clients to interact with the Riddle server, such as a game.

🤖 Use AI to generate code a client that functions as a riddle guessing game. Your game must include the following features:

the user gets 10 guesses of random riddles from the server
the user can input a guess for each riddle
display to the user if their guess was correct or incorrect
after the user has guessed 10 questions, display their total score

Here is a Game Client example. As long as it includes the required features, it can look however you’d like.