Refactor API documentation for search and logout endpoints; enhance styling for code blocks and navigation items

static/index.html

@@ -133,77 +133,24 @@ class LoginResponse {
                 </div>
 
                 <div class="endpoint" id="search">
-                    <h3>3. Search Endpoint</h3>
-                    <p><span class="method">POST</span><span class="endpoint-url">/search</span></p>
-                    <p>This endpoint is used to send a search query and retrieve results. It requires a valid access token.</p>
-                    
-                    <h4>cURL Request:</h4>
-                    <pre><code class="language-bash">curl -X POST https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space/search \
-     -H "Content-Type: application/json" \
-     -H "Authorization: Bearer your-access-token" \
-     -d '{"query": "test query"}'</code></pre>
-
-                    <h4>Flutter Implementation:</h4>
-                    <pre><code class="language-dart">class SearchResult {
-  final String text;
-  final double similarity;
-  final String modelType;
-
-  SearchResult({
-    required this.text,
-    required this.similarity,
-    required this.modelType,
-  });
-
-  factory SearchResult.fromJson(Map<String, dynamic> json) {
-    return SearchResult(
-      text: json['text'],
-      similarity: json['similarity'].toDouble(),
-      modelType: json['model_type'],
-    );
-  }
-}
-
-Future<List<SearchResult>> search(String query, String accessToken) async {
-  final url = Uri.parse('https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space/search');
-  
-  try {
-    final response = await http.post(
-      url,
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer $accessToken',
-      },
-      body: jsonEncode({
-        'query': query,
-      }),
-    );
-
-    if (response.statusCode == 200) {
-      List<dynamic> jsonList = jsonDecode(response.body);
-      return jsonList.map((json) => SearchResult.fromJson(json)).toList();
-    } else {
-      throw Exception('Search failed: ${response.body}');
-    }
-  } catch (e) {
-    throw Exception('Network error: $e');
-  }
-}</code></pre>
-                    
-                    <h4>Response:</h4>
-                    <pre><code class="language-json">[
-    {
-        "text": "Result 1 text",
-        "similarity": 0.95,
-        "model_type": "all-mpnet-base-v2"
-    },
-    {
-        "text": "Result 2 text",
-        "similarity": 0.92,
-        "model_type": "openai"
-    }
-]</code></pre>
-                </div>
+                  <h3>3. Search Endpoint</h3>
+                  <p><span class="method">POST</span><span class="endpoint-url">/search</span></p>
+                  <p>This endpoint is used to send a search query and retrieve results. It requires a valid access token.</p>
+                  
+                  <h4>Response:</h4>
+                  <pre><code class="language-json">[
+                  {
+                      "text": "Result 1 text",
+                      "similarity": 0.95,
+                      "model_type": "all-mpnet-base-v2"
+                  },
+                  {
+                      "text": "Result 2 text",
+                      "similarity": 0.92,
+                      "model_type": "text-embedding-3-small"
+                  }
+              ]</code></pre>
+              </div>
 
                 <div class="endpoint" id="save">
                     <h3>4. Save Data Endpoint</h3>
@@ -286,38 +233,39 @@ Future<void> saveData(List<SaveInput> items, String accessToken) async {
 }</code></pre>
                 </div>
                 <div class="endpoint" id="logout">
-                    <h3>5. Log-out Endpoint</h3>
-                    <p><span class="method">POST</span><span class="endpoint-url">/logout</span></p>
-                    <p>This endpoint is used to revoke the access token after the event of logout click.</p>
-
-                    <h4>cURL Reqeust:</h4>
-                    <pre><code class="language-bash">curl -X POST https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space/logout \
-                      -H "Authorization: Bearer YOUR_ACCESS_TOKEN"</code></pre>
-                      <h4>Flutter Implementation:</h4>
-                      <pre><code class="language-dart">Future<void> logout(String accessToken) async {
-  final url = Uri.parse('https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space/logout');
-
-  try {
-    final response = await http.post(
-      url,
-      headers: {
-        'Authorization
-        ': 'Bearer $accessToken',
-      },
-    );
-
-    if (response.statusCode != 200) {
-      throw Exception('Failed to logout: ${response.body}');
-    }
-  } catch (e) {
-    throw Exception('Network error: $e');
-  }
-}</code></pre>
-                    <h4>Response:</h4>
-                    <pre><code class="language-json">{
-    "message": "Successfully logged out"
-}</code></pre>
-                </div>
+                  <h3>5. Logout Endpoint</h3>
+                  <p><span class="method">POST</span><span class="endpoint-url">/logout</span></p>
+                  <p>This endpoint is used to revoke the current access token.</p>
+                  
+                  <h4>cURL Request:</h4>
+                  <pre><code class="language-bash">curl -X POST https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space/logout \
+                   -H "Authorization: Bearer your-access-token"</code></pre>
+                  
+                  <h4>Flutter Implementation:</h4>
+                  <pre><code class="language-dart">Future<void> logout(String accessToken) async {
+                final url = Uri.parse('https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space/logout');
+                
+                try {
+                  final response = await http.post(
+                    url,
+                    headers: {
+                      'Authorization': 'Bearer $accessToken',
+                    },
+                  );
+              
+                  if (response.statusCode != 200) {
+                    throw Exception('Failed to logout: ${response.body}');
+                  }
+                } catch (e) {
+                  throw Exception('Network error: $e');
+                }
+              }</code></pre>
+                  
+                  <h4>Response:</h4>
+                  <pre><code class="language-json">{
+                  "message": "Successfully logged out"
+              }</code></pre>
+              </div>
             </section>
 
             <section id="workflow">
@@ -475,6 +423,23 @@ class _ApiWorkflowExampleState extends State<ApiWorkflowExample> {
     }
   }
 
+  Future<void> _logout() async {
+    try {
+      await logout(_accessToken);
+      setState(() {
+        _accessToken = '';
+        _refreshToken = '';
+      });
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Logged out successfully!')),
+      );
+    } catch (e) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Logout failed: $e')),
+      );
+    }
+  }  
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -502,6 +467,10 @@ class _ApiWorkflowExampleState extends State<ApiWorkflowExample> {
               onPressed: _refreshToken,
               child: Text('Refresh Token'),
             ),
+            ElevatedButton(
+              onPressed: _logout,
+              child: Text('Logout'),
+            ),
             Expanded(
               child: ListView.builder(
                 itemCount: _searchResults.length,
@@ -687,6 +656,11 @@ class SaveInput {
   }
 }</code></pre>
                 </div>
+              <div class="endpoint">
+                  <h3>Step 5: Logout</h3>
+                  <pre><code class="language-bash">curl -X POST https://humblebeeai-al-ghazali-rag-retrieval-api.hf.space/logout \
+                   -H "Authorization: Bearer your-access-token"</code></pre>
+              </div>
             </section>
         </main>
     </div>

static/script.js

@@ -1,11 +1,11 @@
 // Generate navigation items
 const sections = [
-    { id: 'endpoints', title: 'Endpoints' },
-    { id: 'login', title: 'Login' },
-    { id: 'refresh', title: 'Refresh Token' },
-    { id: 'search', title: 'Search' },
-    { id: 'save', title: 'Save'},
-    { id: 'logout', title: 'Logout' },
+    { id: 'endpoints', title: 'API Endpoints' },
+    { id: 'login', title: '1. Login' },
+    { id: 'refresh', title: '2. Refresh Token' },
+    { id: 'search', title: '3. Search' },
+    { id: 'save', title: '4. Save Data' },
+    { id: 'logout', title: '5. Logout' },
     { id: 'workflow', title: 'Workflow Example' }
 ];
 

static/style.css

@@ -145,6 +145,7 @@ pre code {
     border-radius: 0.5rem;
     padding: 1.5rem;
     margin: 1.5rem 0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
 .method {
@@ -155,11 +156,13 @@ pre code {
     color: white;
     font-weight: 500;
     margin-right: 0.5rem;
+    font-size: 0.9rem;
 }
 
 .endpoint-url {
     font-family: 'Fira Code', monospace;
     color: var(--secondary-color);
+    font-size: 0.95rem;
 }
 
 @media (max-width: 768px) {