Implement Web UI Enhancements

README.md

@@ -18,6 +18,34 @@ This guide will help you set up your own MeowGPT Discord bot using the provided
 
 6. **Free Hosting**: Visit [splittic.app](https://splittic.app) for free hosting. Follow their instructions to set up your bot hosting.
 
+### Environment Setup
+
+1. **Create a Virtual Environment**: It's recommended to use a virtual environment to manage dependencies. Run the following command to create one:
+
+    ```bash
+    python -m venv venv
+    ```
+
+2. **Activate the Virtual Environment**: Activate the virtual environment using the command below:
+
+    - On Windows:
+
+        ```bash
+        .env\Scriptsctivate
+        ```
+
+    - On macOS and Linux:
+
+        ```bash
+        source venv/bin/activate
+        ```
+
+3. **Install Dependencies**: Install the required packages using the `requirements.txt` file. Run:
+
+    ```bash
+    pip install -r requirements.txt
+    ```
+
 ### Configuration
 
 1. Open the `config.py` file and update the following variables:
@@ -26,11 +54,41 @@ This guide will help you set up your own MeowGPT Discord bot using the provided
     - `activity`: Customize the activity message as desired. Use `{s}` for the server count and `{u}` for the user count.
     - `channel_ids`: Add the Channel IDs of the Discord channels where you want the bot to respond.
 
+4. **Configure the Bot**: Open the `example_config.py` file and update the following variables:
+
+    - `api_key`: Replace `"YOUR_API_KEY"` with your SplitticAPI key.
+    - `token`: Replace `"YOUR_DISCORD_BOT_TOKEN"` with the Discord bot token you obtained.
+    - `activity`: Customize the activity message as desired. Use `{s}` for the server count and `{u}` for the user count.
+    - `channel_ids`: Add the Channel IDs of the Discord channels where you want the bot to respond.
+
+5. **Rename the Configuration File**: After updating, rename `example_config.py` to `config.py` to ensure the bot can access your configuration.
+
+### Web UI Setup
+
+To interact with MeowGPT through a web interface, follow these steps:
+
+1. **Install Flask**: Ensure Flask is installed in your environment. If not, you can install it using pip:
+
+    ```bash
+    pip install Flask
+    ```
+
+2. **Run the Flask Server**: Execute the `web_ui.py` script to start the web server. Use the following command:
+
+    ```bash
+    python web_ui.py
+    ```
+
+3. **Access the Web Interface**: Open your web browser and go to `http://127.0.0.1:5000/` to interact with the MeowGPT bot through the web interface.
+
 ### Bot Initialization
 
 1. Save your text prompt (if any) in a file named `prompt.txt`. If you don't have a prompt, you can leave the file empty.
 
-2. Run the `bot.py` script to initialize your bot.
+2. **Run the Bot**: Execute the `bot.py` script to start your bot. Use the following command:
+
+    ```bash
+    python bot.py
 
     ```bash
     python bot.py
@@ -59,3 +117,4 @@ Visit [splittic.app](https://splittic.app) to take advantage of free hosting for
 If you encounter issues during the setup, check the console for error messages and ensure that you have followed all the steps correctly. If problems persist, refer to the documentation of the libraries used in the code (Discord.py and SplitticAPI) for additional guidance.
 
 Congratulations! You have successfully set up your MeowGPT Discord bot. Enjoy chatting with your AI-powered companion!
+

bot.py

@@ -1,7 +1,3 @@
-import os
-os.system("pip install splitticapi")
-os.system("pip install discord")
-os.system("pip install asyncio")
 from SplitticAPI.meowgpt import ChatModule
 import discord
 import config
@@ -24,10 +20,11 @@ async def update_activity(self):
             await self.change_presence(activity=new_activity)
             await asyncio.sleep(10)
 
-client = Client()
-ChatModule.initialize(config.api_key)
-prompt = open('prompt.txt', 'r').read()
 chats = {}
+prompt = open('prompt.txt', 'r').read()
+
+ChatModule.initialize(config.api_key)
+client = Client()
 
 @client.event
 async def on_ready():

example_config.py

@@ -1,9 +1,18 @@
-api_key = "YOUR_API_KEY"
-token = "YOUR_DISCORD_BOT_TOKEN"
-activity = "{u} Chats | {s} Servers"
-channel_ids = [
-    CHANNEL_ID_1,
-    CHANNEL_ID_2,
-    CHANNEL_ID_3,
-    etc
-]
+# Replace with your SplitticAPI key
+api_key = "YOUR_API_KEY"
+
+# Replace with your Discord bot token
+token = "YOUR_DISCORD_BOT_TOKEN"
+
+# Customize the activity message. Use {s} for server count and {u} for user count
+activity = "{u} Chats | {s} Servers"
+
+# List the Channel IDs where the bot should operate
+channel_ids = [
+    # Replace with actual channel IDs
+    CHANNEL_ID_1,
+    CHANNEL_ID_2,
+    CHANNEL_ID_3,
+    # Add more channel IDs as needed
+]
+

run.py

@@ -1,8 +1,9 @@
-from SplitticAPI.meowgpt import ChatModule
-
-# Set the global API key
-api_key = "sk-a374c38c9d72cc7490868521648d6ac47762b629501574cca0c7f9c803bcfd68"
-ChatModule.initialize(api_key)
+from SplitticAPI.meowgpt import ChatModule
+import config
+
+# Set the global API key
+api_key = config.api_key
+ChatModule.initialize(api_key)
 
 # Create a ChatModule instance with a unique chat ID
 chat_instance = ChatModule.create_chat(api_key)
@@ -15,4 +16,5 @@ def main():
 
 # Run the program
 if __name__ == "__main__":
-    main()
+    main()
+

web_ui.py

@@ -0,0 +1,56 @@
+from flask import Flask, request, render_template_string
+from SplitticAPI.meowgpt import ChatModule
+import config
+
+# Initialize the Flask app
+app = Flask(__name__)
+
+# Initialize the ChatModule with the API key
+ChatModule.initialize(config.api_key)
+chat_instance = ChatModule.create_chat(config.api_key)
+
+# HTML template for the web interface
+html_template = """
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>MeowGPT Web Interface</title>
+  </head>
+  <body>
+    <div style="max-width: 600px; margin: auto; padding: 20px;">
+      <h1>MeowGPT Web Interface</h1>
+      <form method="post" action="/chat">
+        <div>
+          <label for="user_input">Enter your message:</label>
+          <textarea id="user_input" name="user_input" rows="4" style="width: 100%;"></textarea>
+        </div>
+        <div style="margin-top: 10px;">
+          <button type="submit">Send</button>
+        </div>
+      </form>
+      {% if bot_response %}
+      <div style="margin-top: 20px;">
+        <h2>Bot Response:</h2>
+        <p>{{ bot_response }}</p>
+      </div>
+      {% endif %}
+    </div>
+  </body>
+</html>
+"""
+
+@app.route('/', methods=['GET'])
+def home():
+    return render_template_string(html_template)
+
+@app.route('/chat', methods=['POST'])
+def chat():
+    user_input = request.form['user_input']
+    bot_response = chat_instance.reply(user_input)
+    return render_template_string(html_template, bot_response=bot_response)
+
+if __name__ == '__main__':
+    app.run(debug=True)
+