Updating App

README.md

@@ -1,5 +1,5 @@
 ---
-title: GPT4.5TurboApp
+title: GPT4TurboApp
 emoji: 📊
 colorFrom: blue
 colorTo: purple
@@ -7,4 +7,179 @@ sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<p align = "center" draggable=”false” ><img src="https://github.com/AI-Maker-Space/LLM-Dev-101/assets/37101144/d1343317-fa2f-41e1-8af1-1dbb18399719" 
+     width="200px"
+     height="auto"/>
+</p>
+
+
+## <h1 align="center" id="heading">:wave: Welcome to Beyond ChatGPT!!</h1>
+
+## 🤖 GPT-4 Turbo Application with DALL-E 3 Image Generation
+
+> If you need an introduction to `git`, or information on how to set up API keys for the tools we'll be using in this repository - check out our [Interactive Dev Environment for LLM Development](https://github.com/AI-Maker-Space/Interactive-Dev-Environment-for-LLM-Development/tree/main) which has everything you'd need to get started in this repository!
+
+In this repository, we'll walk you through the steps to create a Large Language Model (LLM) application using Chainlit, then containerize it using Docker, and finally deploy it on Huggingface Spaces.
+
+Are you ready? Let's get started!
+
+<details>
+  <summary>🖥️ Accessing "gpt-3.5-turbo" (ChatGPT) like a developer</summary>
+
+1. Head to [this notebook](https://colab.research.google.com/drive/1mOzbgf4a2SP5qQj33ZxTz2a01-5eXqk2?usp=sharing) and follow along with the instructions!
+
+2. Complete the notebook and try out your own system/assistant messages!
+
+That's it! Head to the next step and start building your application!
+
+</details>
+
+
+<details>
+  <summary>🏗️ Building Your GPT-4 Turbo Application with DALL-E 3 Image Generation</summary>
+
+1. Clone [this](https://github.com/AI-Maker-Space/Beyond-ChatGPT/tree/main) repo.
+
+     ``` bash
+     git clone https://github.com/AI-Maker-Space/Beyond-ChatGPT.git
+     ```
+
+2. Navigate inside this repo
+     ``` bash
+     cd Beyond-ChatGPT
+     ```
+
+3. Install the packages required for this python envirnoment in `requirements.txt`.
+     ``` bash
+     pip install -r requirements.txt
+     ``` 
+
+4. Open your `.env` file. Replace the `###` in your `.env` file with your OpenAI Key and save the file.
+     ``` bash
+     OPENAI_API_KEY=sk-###
+     ```
+
+5. Let's try deploying it locally. Make sure you're in the python environment where you installed Chainlit and OpenAI. Run the app using Chainlit. This may take a minute to run.
+     ``` bash
+     chainlit run app.py -w
+     ```
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/54bcccf9-12e2-4cef-ab53-585c1e2b0fb5"> 
+</p>
+
+Great work! Let's see if we can interact with our chatbot.
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/854e4435-1dee-438a-9146-7174b39f7c61"> 
+</p> 
+
+Awesome! Time to throw it into a docker container and prepare it for shipping!
+</details>
+
+
+
+<details>
+  <summary>🐳 Containerizing our App</summary>
+
+1. Let's build the Docker image. We'll tag our image as `llm-app` using the `-t` parameter. The `.` at the end means we want all of the files in our current directory to be added to our image.
+     
+     ``` bash
+     docker build -t llm-app .
+     ```
+
+2. Run and test the Docker image locally using the `run` command. The `-p`parameter connects our **host port #** to the left of the `:` to our **container port #** on the right.
+    
+     ``` bash
+     docker run -p 7860:7860 llm-app
+     ```
+
+3. Visit http://localhost:7860 in your browser to see if the app runs correctly.
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/2c764f25-09a0-431b-8d28-32246e0ca1b7"> 
+</p>
+
+Great! Time to ship!
+</details>
+
+
+<details>
+  <summary>🚀 Deploying Your First LLM App</summary>
+
+1. Let's create a new Huggingface Space. Navigate to [Huggingface](https://huggingface.co) and click on your profile picture on the top right. Then click on `New Space`.
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/f0656408-28b8-4876-9887-8f0c4b882bae"> 
+</p>
+
+2. Setup your space as shown below:
+   
+- Owner: Your username
+- Space Name: `llm-app`
+- License: `Openrail`
+- Select the Space SDK: `Docker`
+- Docker Template: `Blank`
+- Space Hardware: `CPU basic - 2 vCPU - 16 GB - Free`
+- Repo type: `Public`
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/8f16afd1-6b46-4d9f-b642-8fefe355c5c9"> 
+</p>
+
+3. You should see something like this. We're now ready to send our files to our Huggingface Space. After cloning, move your files to this repo and push it along with your docker file. You DO NOT need to create a Dockerfile. Make sure NOT TO push your `.env` file. This should automatically be ignored.
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/cbf366e2-7613-4223-932a-72c67a73f9c6"> 
+</p>
+
+4. After pushing all files, navigate to the settings in the top right to add your OpenAI API key.
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/a1123a6f-abdd-4f76-bea4-39acf9928762"> 
+</p>
+
+5. Scroll down to `Variables and secrets` and click on `New secret` on the top right.
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/a8a4a25d-752b-4036-b572-93381370c2db"> 
+</p>
+
+6. Set the name to `OPENAI_API_KEY` and add your OpenAI key under `Value`. Click save.
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/0a897538-1779-48ff-bcb4-486af30f7a14"> 
+</p>
+
+7. To ensure your key is being used, we recommend you `Restart this Space`.
+
+<p align = "center" draggable=”false”>
+<img src="https://github.com/AI-Maker-Space/LLMOps-Dev-101/assets/37101144/fb1d83af-6ebe-4676-8bf5-b6d88f07c583"> 
+</p>
+
+8. Congratulations! You just deployed your first LLM! 🚀🚀🚀 Get on linkedin and post your results and experience! Make sure to tag us at #AIMakerspace !
+
+Here's a template to get your post started!
+
+```
+🚀🎉 Exciting News! 🎉🚀
+
+🏗️ Today, I'm thrilled to announce that I've successfully built and shipped my first-ever LLM using the powerful combination of Chainlit, Docker, and the OpenAI API! 🖥️
+
+Check it out 👇
+[LINK TO APP]
+
+A big shoutout to the @**AI Makerspace** for all making this possible. Couldn't have done it without the incredible community there. 🤗🙏
+
+Looking forward to building with the community! 🙌✨ Here's to many more creations ahead! 🥂🎉
+
+Who else is diving into the world of AI? Let's connect! 🌐💡
+
+#FirstLLM #Chainlit #Docker #OpenAI #AIMakerspace
+```
+
+</details>
+
+<p></p>
+
+### That's it for now!  And so it begins.... :)

app.py

@@ -20,7 +20,8 @@ def rename(orig_author):
         "AgentExecutor": "The LLM Brain",
         "LLMChain": "The Assistant",
         "GenerateImage": "DALL-E 3",
-        "ChatOpenAI": "GPT-4.5 Turbo",
+        "ChatOpenAI": "GPT-4 Turbo",
+        "Chatbot": "Coolest App",
     }
     return mapping.get(orig_author, orig_author)
 
@@ -67,33 +68,54 @@ async def start():
 async def setup_agent(settings):
     print("Setup agent with following settings: ", settings)
 
+    # We set up our agent with the user selected (or default) settings here.
     llm = ChatOpenAI(
         temperature=settings["Temperature"],
         streaming=settings["Streaming"],
         model=settings["Model"],
     )
+
+    # We get our memory here, which is used to track the conversation history.
     memory = get_memory()
+
+    # This suffix is used to provide the chat history to the prompt.
     _SUFFIX = "Chat history:\n{chat_history}\n\n" + SUFFIX
 
+    # We initialize our agent here, which is simply being used to decide between responding with text
+    # or an image
     agent = initialize_agent(
-        llm=llm,
-        tools=[generate_image_tool],
-        agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION,
-        memory=memory,
+        llm=llm,  # our LLM (default is GPT-4 Turbo)
+        tools=[
+            generate_image_tool
+        ],  # our custom tool used to generate images with DALL-E 3
+        agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION,  # the agent type we're using today
+        memory=memory,  # our memory!
         agent_kwargs={
-            "suffix": _SUFFIX,
+            "suffix": _SUFFIX,  # adding our chat history suffix
             "input_variables": ["input", "agent_scratchpad", "chat_history"],
         },
     )
-    cl.user_session.set("agent", agent)
+    cl.user_session.set("agent", agent)  # storing our agent in the user session
 
 
 @cl.on_message
 async def main(message: cl.Message):
-    agent = cl.user_session.get("agent")  # type: AgentExecutor
+    """
+    This function is going to intercept all messages sent by the user, and
+    move through our agent flow to generate a response.
+
+    There are ultimately two different options for the agent to respond with:
+    1. Text
+    2. Image
+
+    If the agent responds with text, we simply send the text back to the user.
+
+    If the agent responds with an image, we need to generate the image and send
+    it back to the user.
+    """
+    agent = cl.user_session.get("agent")
     cl.user_session.set("generated_image", None)
 
-    # No async implementation in the Stability AI client, fallback to sync
     res = await cl.make_async(agent.run)(
         input=message.content, callbacks=[cl.LangchainCallbackHandler()]
     )

chainlit.md

@@ -1,14 +1,3 @@
-# Welcome to Chainlit! 🚀🤖
+# Welcome to a GPT-4 Turbo application with DALL-E 3 Image Generation capabilities!
 
-Hi there, Developer! 👋 We're excited to have you on board. Chainlit is a powerful tool designed to help you prototype, debug and share applications built on top of LLMs.
-
-## Useful Links 🔗
-
-- **Documentation:** Get started with our comprehensive [Chainlit Documentation](https://docs.chainlit.io) 📚
-- **Discord Community:** Join our friendly [Chainlit Discord](https://discord.gg/ZThrUxbAYw) to ask questions, share your projects, and connect with other developers! 💬
-
-We can't wait to see what you create with Chainlit! Happy coding! 💻😊
-
-## Welcome screen
-
-To modify the welcome screen, edit the `chainlit.md` file at the root of your project. If you do not want a welcome screen, just leave this file empty.
+Hey! We're excited to provide you with a GPT-4 Turbo-powered application complete with Image Generation!

tools.py

@@ -11,6 +11,10 @@ import chainlit as cl
 
 
 def get_image_name():
+    """
+    We need to keep track of images we generate, so we can reference them later
+    and display them correctly to our users.
+    """
     image_count = cl.user_session.get("image_count")
     if image_count is None:
         image_count = 0
@@ -23,6 +27,13 @@ def get_image_name():
 
 
 def _generate_image(prompt: str):
+    """
+    This function is used to generate an image from a text prompt using
+    DALL-E 3.
+
+    We use the OpenAI API to generate the image, and then store it in our
+    user session so we can reference it later.
+    """
     client = OpenAI()
 
     response = client.images.generate(
@@ -50,8 +61,10 @@ def generate_image(prompt: str):
     return f"Here is {image_name}."
 
 
+# this is our tool - which is what allows our agent to generate images in the first place!
+# the `description` field is of utmost imporance as it is what the LLM "brain" uses to determine
+# which tool to use for a given input.
 generate_image_format = '{{"prompt": "prompt"}}'
-
 generate_image_tool = Tool.from_function(
     func=generate_image,
     name="GenerateImage",