Test client improvements (#85)

* Reorganize server * Add spinner to send * Add command help modal * Formatting
RAHB-REALTORS-Association · Sep 9, 2023 · 5b764a2 · 5b764a2
1 parent e3f9306
commit 5b764a2
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -23,8 +23,8 @@
   - [Data Practices 📝](#data-practices-)
 - [AI APIs and User Awareness ℹ️](#ai-apis-and-user-awareness-ℹ️)
 - [🌐 Community](#-community)
-  - [Contributing 👥🤝](#contributing-)
-  - [Reporting Bugs 🐛📝](#reporting-bugs-)
+  - [Contributing 👥](#contributing-)
+  - [Reporting Bugs 🐛](#reporting-bugs-)
 - [📄 License](#-license)
 
 ## 🛠️ Setup
@@ -103,7 +103,7 @@ Now, your bot can be added to any room within your Google Workspace.
 
 ## 👷 Development
 
-The `test_server.py` script included in this repository serves as a lightweight, local development server for Chat²GPT. This enables you to test new features, debug issues, or get a firsthand experience of the chatbot's capabilities without deploying it to a production environment. Running the test server starts a web service that you can access at [http://127.0.0.1:5000](http://127.0.0.1:5000).
+The `server.py` script included in this repository serves as a lightweight, local development server for Chat²GPT. This enables you to test new features, debug issues, or get a firsthand experience of the chatbot's capabilities without deploying it to a production environment. Running the server starts a web service that you can access at [http://127.0.0.1:5000](http://127.0.0.1:5000).
 
 ### Ubuntu 🤓
 
@@ -147,12 +147,12 @@ To run Chat²GPT on Ubuntu, follow these steps:
    pip3 install -r requirements.txt
    ```
 
-5. **Run the Test Server**
+5. **Run the Server**
 
    Start the Chat²GPT server:
 
    ```bash
-   python3 test_server.py
+   python3 server.py
    ```
 
    The server should start successfully and can be accessed at [http://127.0.0.1:5000](http://127.0.0.1:5000).
@@ -199,12 +199,12 @@ To run Chat²GPT on macOS, you can use Homebrew to manage your packages. Follow
    pip3 install -r requirements.txt
    ```
 
-5. **Run the Test Server**
+5. **Run the Server**
 
    Start the Chat²GPT server:
 
    ```bash
-   python3 test_server.py
+   python3 server.py
    ```
 
    The server should start successfully and can be accessed at [http://127.0.0.1:5000](http://127.0.0.1:5000).
@@ -251,12 +251,12 @@ To run Chat²GPT on an Android device using Termux, follow these steps:
    pip install -r requirements.txt
    ```
 
-5. **Run the Test Server**
+5. **Run the Server**
 
    Finally, start the Chat²GPT server using the `python` command:
 
    ```bash
-   python test_server.py
+   python server.py
    ```
 
    The server should start successfully and can be accessed at [http://127.0.0.1:5000](http://127.0.0.1:5000).
@@ -311,7 +311,7 @@ Use the following commands for Chat²GPT:
 
 ## 🌐 Community
 
-### Contributing 👥🤝
+### Contributing 👥
 
 Contributions of any kind are very welcome, and would be much appreciated. 🙏
 For Code of Conduct, see [Contributor Covenant](https://www.contributor-covenant.org/version/2/1/code_of_conduct/).
@@ -320,7 +320,7 @@ To get started, fork the repo, make your changes, add, commit and push the code,
 
 [![Submit a PR](https://img.shields.io/badge/Submit_a_PR-GitHub-%23060606?style=for-the-badge&logo=github&logoColor=fff)](https://github.com/RAHB-REALTORS-Association/chat2gpt/compare)
 
-### Reporting Bugs 🐛📝
+### Reporting Bugs 🐛
 
 If you've found something that doesn't work as it should, or would like to suggest a new feature, then go ahead and raise an issue on GitHub.
 For bugs, please outline the steps needed to reproduce, and include relevant info like system info and resulting logs.

diff --git a/test_client.js → client.js b/test_client.js → client.js
@@ -1,13 +1,18 @@
 $("#userForm").submit(function(e) {
     e.preventDefault();
+
+    // Show spinner and disable button
+    $("#spinner").show();
+    $("#submitButton").prop("disabled", true);
+
     const userInput = $("#userInput").val();
     const wrappedEventData = {
         "type": "MESSAGE",
         "user": { "name": "users/simulated" },
         "message": { "text": userInput }
     };
     $.ajax({
-        url: "/post",
+        url: "/api",
         type: "POST",
         data: JSON.stringify(wrappedEventData),
         contentType: "application/json",
@@ -17,10 +22,16 @@ $("#userForm").submit(function(e) {
             const htmlFormattedText = marked.parse(markdownText);
             $("#formatted").html(htmlFormattedText);
             $("#raw").html('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
-        },              
+        },
         error: function(error) {
             // Handle the error
-            $("#responseContainer").html("<h6>Response:</h6><pre>" + JSON.stringify(error, null, 2) + "</pre>");
+            $("#formatted").html(error);
+            $("#raw").html("<pre>" + JSON.stringify(error, null, 2) + "</pre>");
+        },
+        complete: function() {
+            // Hide spinner and re-enable button
+            $("#spinner").hide();
+            $("#submitButton").prop("disabled", false);
         }
     });
 });
diff --git a/docs/development/index.md b/docs/development/index.md
@@ -7,4 +7,4 @@ has_children: true
 
 # 👷 Development
 
-The `test_server.py` script included in this repository serves as a lightweight, local development server for Chat²GPT. This enables you to test new features, debug issues, or get a firsthand experience of the chatbot's capabilities without deploying it to a production environment. Running the test server starts a web service that you can access at [http://127.0.0.1:5000](http://127.0.0.1:5000).
+The `server.py` script included in this repository serves as a lightweight, local development server for Chat²GPT. This enables you to test new features, debug issues, or get a firsthand experience of the chatbot's capabilities without deploying it to a production environment. Running the server starts a web service that you can access at [http://127.0.0.1:5000](http://127.0.0.1:5000).
diff --git a/docs/development/macos.md b/docs/development/macos.md
@@ -47,12 +47,12 @@ To run Chat²GPT on macOS, you can use Homebrew to manage your packages. Follow
    pip3 install -r requirements.txt
    ```
 
-5. **Run the Test Server**
+5. **Run the Server**
 
    Start the Chat²GPT server:
 
    ```bash
-   python3 test_server.py
+   python3 server.py
    ```
 
    The server should start successfully and can be accessed at [http://127.0.0.1:5000](http://127.0.0.1:5000).
diff --git a/docs/development/termux.md b/docs/development/termux.md
@@ -47,12 +47,12 @@ To run Chat²GPT on an Android device using Termux, follow these steps:
    pip install -r requirements.txt
    ```
 
-5. **Run the Test Server**
+5. **Run the Server**
 
    Finally, start the Chat²GPT server using the `python` command:
 
    ```bash
-   python test_server.py
+   python server.py
    ```
 
    The server should start successfully and can be accessed at [http://127.0.0.1:5000](http://127.0.0.1:5000).
diff --git a/docs/development/ubuntu.md b/docs/development/ubuntu.md
@@ -47,12 +47,12 @@ To run Chat²GPT on Ubuntu, follow these steps:
    pip3 install -r requirements.txt
    ```
 
-5. **Run the Test Server**
+5. **Run the Server**
 
    Start the Chat²GPT server:
 
    ```bash
-   python3 test_server.py
+   python3 server.py
    ```
 
    The server should start successfully and can be accessed at [http://127.0.0.1:5000](http://127.0.0.1:5000).
diff --git a/docs/index.md b/docs/index.md
@@ -22,6 +22,6 @@ nav_order: 0
   - [Data Practices 📝](privacy.html#data-practices-)
   - [OpenAI and User Awareness ℹ️](privacy.html#openai-and-user-awareness-%E2%84%B9%EF%B8%8F)
 - [🌐 Community](community.html)
-  - [Contributing 👥🤝](community.html#Contributing-)
-  - [Reporting Bugs 🐛📝](community.html#reporting-bugs-)
+  - [Contributing 👥](community.html#Contributing-)
+  - [Reporting Bugs 🐛](community.html#reporting-bugs-)
 - [📄 License](license.html)
diff --git a/test_interface.html → interface.html b/test_interface.html → interface.html
@@ -18,7 +18,7 @@
             white-space: -o-pre-wrap;
             word-wrap: break-word;
         }
-    </style>   
+    </style>
 </head>
 <body class="container">
     <div style="display: flex; justify-content: space-between; align-items: center;">
@@ -30,24 +30,28 @@ <h1 class="mt-5">🤖💬 Chat²GPT Test</h1>
         </div>
     </div>
     <form id="userForm" class="mt-4">
+        <h4>Request:</h4>
         <div class="mb-3">
-            <h6>Enter your message or <a href="https://rahb-realtors-association.github.io/chat2gpt/usage/help.html" title="/reset&#10;&#10;/image &lt;prompt&gt;&#10;&#10;/voices&#10;&#10;/tts &lt;voice&gt; &lt;prompt&gt;&#10;&#10;/help" target="_blank" rel="noopener noreferrer">command</a>:</h6>
             <textarea id="userInput" name="userInput" class="form-control" rows="4" required></textarea>
+            <span>&nbsp;Enter your message or <a href="#" data-bs-toggle="modal" data-bs-target="#helpModal">command</a>.</span>
         </div>
-        <button type="submit" class="btn btn-primary">Send</button>
+        <button type="submit" class="btn btn-primary" id="submitButton">
+            <span id="spinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display:none;"></span>
+            Send
+        </button>        
     </form>
     <div id="responseContainer" class="mt-4">
         <h4>Response:</h4> 
         <div class="container mt-4">
             <ul class="nav nav-tabs" id="responseTabs" role="tablist">
                 <li class="nav-item" role="presentation">
-                    <a class="nav-link active" id="formatted-tab" data-bs-toggle="tab" href="#formatted" role="tab" aria-controls="formatted" aria-selected="true">Formatted</a>
+                    <a class="nav-link active" id="formatted-tab" data-bs-toggle="tab" href="#formatted" role="tab" aria-controls="formatted" aria-selected="true">Formatted 📄</a>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <a class="nav-link" id="raw-tab" data-bs-toggle="tab" href="#raw" role="tab" aria-controls="raw" aria-selected="false">Raw</a>
+                    <a class="nav-link" id="raw-tab" data-bs-toggle="tab" href="#raw" role="tab" aria-controls="raw" aria-selected="false">JSON ⚙️</a>
                 </li>
             </ul>
-            <div class="tab-content" id="myTabContent">
+            <div class="tab-content" id="responseTabContent">
                 <div class="tab-pane fade show active" id="formatted" role="tabpanel" aria-labelledby="formatted-tab">
                     <!-- Formatted markdown content goes here -->
                 </div>
@@ -57,6 +61,31 @@ <h4>Response:</h4>
             </div>
         </div>
     </div>
-    <script src="test_client.js"></script>
+    <!-- Help Modal -->
+    <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+            <h5 class="modal-title" id="helpModalLabel">Commands ⌨️</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Use the following commands for Chat²GPT:</p>
+                <ul>
+                    <li><code>/reset</code>: Reinitialize your session.</li>
+                    <li><code>/image &lt;prompt&gt;</code>: Generate an image using OpenAI's DALL·E 2 API.</li>
+                    <li><code>/tts &lt;voice&gt; &lt;prompt&gt;</code>: Get a voice response with ElevenLabs' TTS API.</li>
+                    <li><code>/voices</code>: View available voices for TTS.</li>
+                    <li><code>/help</code>: Access accurate, up-to-date information from the docs.</li>
+                </ul>
+                <p>For more details, visit <a href="https://rahb-realtors-association.github.io/chat2gpt/usage/">Usage</a>.</p>
+            </div>
+            <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+        </div>
+    </div>
+    <script src="client.js"></script>
 </body>
-</html>
+</html>
diff --git a/test_server.py → server.py b/test_server.py → server.py
@@ -6,9 +6,9 @@
 
 @app.route('/')
 def root():
-    return send_from_directory('.', 'test_interface.html')
+    return send_from_directory('.', 'interface.html')
 
-@app.route('/post', methods=['POST'])
+@app.route('/api', methods=['POST'])
 def google_chat_event():
     try:
         # Log the raw request data for debugging
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,4 @@ has_children: true

		# 👷 Development

		The `test_server.py` script included in this repository serves as a lightweight, local development server for Chat²GPT. This enables you to test new features, debug issues, or get a firsthand experience of the chatbot's capabilities without deploying it to a production environment. Running the test server starts a web service that you can access at [http://127.0.0.1:5000](http://127.0.0.1:5000).
		The `server.py` script included in this repository serves as a lightweight, local development server for Chat²GPT. This enables you to test new features, debug issues, or get a firsthand experience of the chatbot's capabilities without deploying it to a production environment. Running the server starts a web service that you can access at [http://127.0.0.1:5000](http://127.0.0.1:5000).