Spaces:

openfree
/

Chain-of-Recursive-Thoughts

Sleeping

App Files Files Community

openfree commited on May 4

Commit

fba7498

verified ·

1 Parent(s): 75e8c43

Update app.py

Browse files

Files changed (1) hide show

app.py +167 -45

app.py CHANGED Viewed

@@ -82,10 +82,14 @@ class InitResponse(BaseModel):
     session_id: str
     status: str
-# Simple HTML interface (API key input form removed)
 @app.get("/", response_class=HTMLResponse)
 async def root():
-    """Root endpoint with a simple HTML interface"""
     html_content = f"""
     <!DOCTYPE html>
     <html>
@@ -94,7 +98,7 @@ async def root():
         <style>
             body {{
                 font-family: Arial, sans-serif;
-                max-width: 800px;
                 margin: 0 auto;
                 padding: 20px;
                 line-height: 1.6;
@@ -133,19 +137,36 @@ async def root():
             button:hover {{
                 background-color: #45a049;
             }}
-            #response {{
                 white-space: pre-wrap;
                 background-color: #f5f5f5;
                 padding: 15px;
                 border-radius: 4px;
-                margin-top: 20px;
                 min-height: 100px;
             }}
             .log {{
                 margin-top: 20px;
                 font-size: 0.9em;
                 color: #666;
             }}
         </style>
     </head>
     <body>
@@ -154,7 +175,6 @@ async def root():
             <div id="init-form">
                 <h2>1. Initialize Chat</h2>
-                <!-- API key input removed -->
                 <label for="model">Model:</label>
                 <input type="text" id="model" value="mistralai/mistral-small-3.1-24b-instruct:free">
@@ -181,12 +201,22 @@ async def root():
                 <button onclick="resetChat()" style="background-color: #f44336;">Reset</button>
             </div>
-            <div id="response-container" style="display: none;">
-                <h2>3. Response</h2>
-                <div id="response">The response will appear here...</div>
-                <div class="log">
-                    <h3>Thinking Process Log:</h3>
-                    <div id="thinking-log"></div>
                 </div>
             </div>
         </div>
@@ -198,7 +228,8 @@ async def root():
         <script>
             let currentSessionId = null;
             async function initializeChat() {{
                 const model = document.getElementById('model').value;
                 const temperature = parseFloat(document.getElementById('temperature').value);
@@ -222,7 +253,10 @@ async def root():
                         document.getElementById('session-id').textContent = currentSessionId;
                         document.getElementById('init-form').style.display = 'none';
                         document.getElementById('chat-form').style.display = 'block';
-                        document.getElementById('response-container').style.display = 'block';
                     }} else {{
                         alert('Initialization failed: ' + (data.detail || 'Unknown error'));
                     }}
@@ -230,7 +264,71 @@ async def root():
                     alert('An error occurred: ' + error.message);
                 }}
             }}
             async function sendMessage() {{
                 if (!currentSessionId) {{
                     alert('Please initialize a chat session first.');
@@ -246,51 +344,55 @@ async def root():
                     return;
                 }}
-                document.getElementById('response').textContent = 'Processing...';
                 document.getElementById('thinking-log').textContent = '';
                 try {{
-                    const response = await fetch('/api/send_message', {{
                         method: 'POST',
                         headers: {{
                             'Content-Type': 'application/json',
                         }},
                         body: JSON.stringify({{
                             session_id: currentSessionId,
-                            message: message,
-                            thinking_rounds: thinkingRounds ? parseInt(thinkingRounds) : null,
-                            alternatives_per_round: alternatives ? parseInt(alternatives) : 3
                         }}),
                     }});
-                    const data = await response.json();
-                    if (response.ok) {{
-                        document.getElementById('response').textContent = data.response;
-                        // Display thinking history
-                        let thinkingLogHTML = '';
-                        data.thinking_history.forEach(item => {{
-                            const selected = item.selected ? ' ✓ Selected' : '';
-                            thinkingLogHTML += "<p><strong>Round " + item.round + selected + ":</strong> ";
-                            if (item.explanation && item.selected) {{
-                                thinkingLogHTML += "<br><em>Reason for selection: " + item.explanation + "</em>";
-                            }}
-                            thinkingLogHTML += "</p>";
-                        }});
-                        document.getElementById('thinking-log').innerHTML = thinkingLogHTML;
                     }} else {{
-                        document.getElementById('response').textContent = 'Error: ' + (data.detail || 'Unknown error');
                     }}
                 }} catch (error) {{
-                    document.getElementById('response').textContent = 'An error occurred: ' + error.message;
                 }}
             }}
             function resetChat() {{
                 currentSessionId = null;
                 document.getElementById('init-form').style.display = 'block';
                 document.getElementById('chat-form').style.display = 'none';
                 document.getElementById('response-container').style.display = 'none';
@@ -317,7 +419,7 @@ async def initialize_chat(config: ChatConfig):
         # Generate a session ID
         session_id = f"session_{datetime.now().strftime('%Y%m%d%H%M%S')}_{uuid.uuid4().hex[:8]}"
-        # If the environment variable is missing, raise an error (or warning)
         if not API_KEY:
             raise HTTPException(status_code=400, detail="The OPENROUTE_API environment variable is not set.")
@@ -338,9 +440,29 @@ async def initialize_chat(config: ChatConfig):
         logger.error(f"Error initializing chat: {str(e)}")
         raise HTTPException(status_code=500, detail=f"Failed to initialize chat: {str(e)}")
 @app.post("/api/send_message")
 async def send_message(request: MessageRequest):
-    """Send a message and get a response with the thinking process"""
     try:
         if request.session_id not in chat_instances:
             raise HTTPException(status_code=404, detail="Session not found")
@@ -558,7 +680,7 @@ async def websocket_endpoint(websocket: WebSocket, session_id: str):
                         "message": "Starting recursive thinking process..."
                     })
-                    # Process the message
                     result = chat.think_and_respond(message_data["content"], verbose=True)
                     processing_time = (datetime.now() - start_time).total_seconds()

     session_id: str
     status: str
+# Simple HTML interface
 @app.get("/", response_class=HTMLResponse)
 async def root():
+    """
+    Root endpoint with a simple HTML interface.
+    Modified to display side-by-side "Original" vs. "Chain-of-Thought" outputs,
+    and to show real-time "thinking in progress" messages.
+    """
     html_content = f"""
     <!DOCTYPE html>
     <html>
         <style>
             body {{
                 font-family: Arial, sans-serif;
+                max-width: 1000px;
                 margin: 0 auto;
                 padding: 20px;
                 line-height: 1.6;
             button:hover {{
                 background-color: #45a049;
             }}
+            #original-response, #chain-response {{
                 white-space: pre-wrap;
                 background-color: #f5f5f5;
                 padding: 15px;
                 border-radius: 4px;
                 min-height: 100px;
             }}
+            .responses-container {{
+                display: flex;
+                gap: 20px;
+                margin-top: 20px;
+            }}
+            .response-column {{
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+            }}
+            .column-title {{
+                margin-top: 0;
+            }}
             .log {{
                 margin-top: 20px;
                 font-size: 0.9em;
                 color: #666;
             }}
+            .thinking-progress {{
+                margin-top: 10px;
+                font-style: italic;
+                color: #555;
+            }}
         </style>
     </head>
     <body>
             <div id="init-form">
                 <h2>1. Initialize Chat</h2>
                 <label for="model">Model:</label>
                 <input type="text" id="model" value="mistralai/mistral-small-3.1-24b-instruct:free">
                 <button onclick="resetChat()" style="background-color: #f44336;">Reset</button>
             </div>
+            <div class="responses-container" id="response-container" style="display: none;">
+                <!-- Original Response Column -->
+                <div class="response-column">
+                    <h2 class="column-title">Original (No Chain-of-Thought)</h2>
+                    <div id="original-response">The original LLM response will appear here...</div>
+                </div>
+                <!-- Chain-of-Thought Response Column -->
+                <div class="response-column">
+                    <h2 class="column-title">Chain-of-Thought</h2>
+                    <div id="chain-thinking-progress" class="thinking-progress"></div>
+                    <div id="chain-response">The chain-of-thought response will appear here...</div>
+                    <div class="log">
+                        <h3>Thinking Process Log:</h3>
+                        <div id="thinking-log"></div>
+                    </div>
                 </div>
             </div>
         </div>
         <script>
             let currentSessionId = null;
+            let ws = null;  // WebSocket for Chain-of-Thought
             async function initializeChat() {{
                 const model = document.getElementById('model').value;
                 const temperature = parseFloat(document.getElementById('temperature').value);
                         document.getElementById('session-id').textContent = currentSessionId;
                         document.getElementById('init-form').style.display = 'none';
                         document.getElementById('chat-form').style.display = 'block';
+                        document.getElementById('response-container').style.display = 'flex';
+                        // Connect to WebSocket for chain-of-thought streaming
+                        connectWebSocket();
                     }} else {{
                         alert('Initialization failed: ' + (data.detail || 'Unknown error'));
                     }}
                     alert('An error occurred: ' + error.message);
                 }}
             }}
+            function connectWebSocket() {{
+                if (!currentSessionId) {{
+                    return;
+                }}
+                const loc = window.location;
+                let wsUrl = '';
+                if (loc.protocol === 'https:') {{
+                    wsUrl = 'wss:';
+                }} else {{
+                    wsUrl = 'ws:';
+                }}
+                wsUrl += '//' + loc.host + '/ws/' + currentSessionId;
+                ws = new WebSocket(wsUrl);
+                ws.onopen = function() {{
+                    console.log('WebSocket connection opened for chain-of-thought.');
+                }};
+                ws.onmessage = function(event) {{
+                    const data = JSON.parse(event.data);
+                    if (data.type === 'status') {{
+                        // Show "thinking in progress" messages
+                        document.getElementById('chain-thinking-progress').textContent = data.message;
+                    }} else if (data.type === 'chunk') {{
+                        // In this example code, "chunk" is not truly partial, but let's append anyway
+                        document.getElementById('chain-thinking-progress').textContent += '\\n' + data.content;
+                    }} else if (data.type === 'final') {{
+                        // Final answer
+                        document.getElementById('chain-thinking-progress').textContent = '';
+                        document.getElementById('chain-response').textContent = data.response;
+                        // Display thinking history
+                        const thinkingLog = document.getElementById('thinking-log');
+                        thinkingLog.innerHTML = '';
+                        data.thinking_history.forEach(item => {{
+                            const selected = item.selected ? ' ✓ Selected' : '';
+                            let logEntry = document.createElement('p');
+                            logEntry.innerHTML = '<strong>Round ' + item.round + selected + ':</strong> ';
+                            if (item.explanation && item.selected) {{
+                                logEntry.innerHTML += '<br><em>Reason for selection: ' + item.explanation + '</em>';
+                            }}
+                            thinkingLog.appendChild(logEntry);
+                        }});
+                    }} else if (data.type === 'error') {{
+                        document.getElementById('chain-thinking-progress').textContent = '';
+                        document.getElementById('chain-response').textContent = 'Error: ' + data.error;
+                    }} else if (data.error) {{
+                        // Session not found or other errors
+                        document.getElementById('chain-thinking-progress').textContent = '';
+                        document.getElementById('chain-response').textContent = 'Error: ' + data.error;
+                    }}
+                }};
+                ws.onerror = function(error) {{
+                    console.error('WebSocket error:', error);
+                    document.getElementById('chain-thinking-progress').textContent = 'WebSocket error. Check console.';
+                }};
+                ws.onclose = function() {{
+                    console.log('WebSocket closed.');
+                }};
+            }}
             async function sendMessage() {{
                 if (!currentSessionId) {{
                     alert('Please initialize a chat session first.');
                     return;
                 }}
+                // Clear out previous responses/log
+                document.getElementById('original-response').textContent = 'Loading original response...';
+                document.getElementById('chain-response').textContent = '';
                 document.getElementById('thinking-log').textContent = '';
+                document.getElementById('chain-thinking-progress').textContent = 'Thinking...';
+                // 1) Get Original Response via standard fetch
                 try {{
+                    const originalRes = await fetch('/api/send_message_original', {{
                         method: 'POST',
                         headers: {{
                             'Content-Type': 'application/json',
                         }},
                         body: JSON.stringify({{
                             session_id: currentSessionId,
+                            message: message
                         }}),
                     }});
+                    const originalData = await originalRes.json();
+                    if (originalRes.ok) {{
+                        document.getElementById('original-response').textContent = originalData.response;
                     }} else {{
+                        document.getElementById('original-response').textContent = 'Error: ' + (originalData.detail || 'Unknown error');
                     }}
                 }} catch (error) {{
+                    document.getElementById('original-response').textContent = 'Error: ' + error.message;
+                }}
+                // 2) Send message to WebSocket for chain-of-thought
+                if (ws && ws.readyState === WebSocket.OPEN) {{
+                    const payload = {{
+                        type: 'message',
+                        content: message,
+                        thinking_rounds: thinkingRounds ? parseInt(thinkingRounds) : null,
+                        alternatives_per_round: alternatives ? parseInt(alternatives) : 3
+                    }};
+                    ws.send(JSON.stringify(payload));
+                }} else {{
+                    document.getElementById('chain-thinking-progress').textContent = 'WebSocket not connected. Unable to get chain-of-thought response.';
                 }}
             }}
             function resetChat() {{
                 currentSessionId = null;
+                if (ws) {{
+                    ws.close();
+                    ws = null;
+                }}
                 document.getElementById('init-form').style.display = 'block';
                 document.getElementById('chat-form').style.display = 'none';
                 document.getElementById('response-container').style.display = 'none';
         # Generate a session ID
         session_id = f"session_{datetime.now().strftime('%Y%m%d%H%M%S')}_{uuid.uuid4().hex[:8]}"
+        # If the environment variable is missing, raise an error
         if not API_KEY:
             raise HTTPException(status_code=400, detail="The OPENROUTE_API environment variable is not set.")
         logger.error(f"Error initializing chat: {str(e)}")
         raise HTTPException(status_code=500, detail=f"Failed to initialize chat: {str(e)}")
+@app.post("/api/send_message_original")
+async def send_message_original(request: MessageRequest):
+    """
+    Return a direct LLM response without applying the chain-of-thought logic.
+    """
+    if request.session_id not in chat_instances:
+        raise HTTPException(status_code=404, detail="Session not found")
+    chat = chat_instances[request.session_id]["chat"]
+    try:
+        # Make a direct call to the LLM without recursion logic
+        messages = [{"role": "user", "content": request.message}]
+        response_data = chat._call_api(messages, temperature=chat.temperature, stream=False)
+        # Extract the text from the response
+        original_text = response_data["choices"][0]["message"]["content"]
+        return {"response": original_text.strip()}
+    except Exception as e:
+        logger.error(f"Error getting original response: {str(e)}")
+        raise HTTPException(status_code=500, detail=str(e))
 @app.post("/api/send_message")
 async def send_message(request: MessageRequest):
+    """Send a message and get a response with the chain-of-thought process (HTTP-based, not streaming)."""
     try:
         if request.session_id not in chat_instances:
             raise HTTPException(status_code=404, detail="Session not found")
                         "message": "Starting recursive thinking process..."
                     })
+                    # Process the message with chain-of-thought
                     result = chat.think_and_respond(message_data["content"], verbose=True)
                     processing_time = (datetime.now() - start_time).total_seconds()