add ai labels and explanation

Author: yilinxia

backend/app/main.py

@@ -70,31 +70,21 @@ def ai_process():
             )
         )
         loop.close()
-        # print(f"AI processing complete. Result length: {len(str(ai_result))}")  # Debug log
 
-        # Ensure both lists are lowercase or normalized if needed
-        def extract_topic_name(s):
-            # Try to extract the topic name before the first colon or dash, and strip formatting
-            # Handles cases like '**visual-programming-editor:** ...' or 'visual-programming-editor: ...'
-            match = re.match(r'[*]*([a-zA-Z0-9\-]+)[*]*[:：]', s.strip())
-            if match:
-                return match.group(1)
-            # Fallback: if the string is just the topic name
-            return s.strip().strip('*')
-
-        intersection = []
-        for ai_item in ai_result:
-            topic_name = extract_topic_name(ai_item)
-            if topic_name in selected_topics:
-                intersection.append(ai_item)
-
-        # print("Selected topics:", selected_topics)
-        # print("Intersection:", intersection)
-        return jsonify({"success": True, "result": intersection})
+        # Return all AI suggestions, not just the intersection
+        return jsonify({
+            "success": True, 
+            "result": ai_result  # Return all suggestions with their explanations
+        })
 
     except Exception as e:
-        # print(f"Error occurred: {str(e)}")  # Debug log
-        return jsonify(["error1", "error2", "error3"]), 500
+        return jsonify(
+            {
+                "success": False,
+                "error": str(e),
+                "message": "An error occurred while processing the request",
+            }
+        ), 500
 
 
 @app.route("/api/explain-topic", methods=["POST"])

backend/app/services/ai_service.py

@@ -3,6 +3,7 @@
 import google.generativeai as genai
 from openai import OpenAI
 from fastapi import HTTPException
+import re
 
 # Configure logging
 logging.basicConfig(level=logging.DEBUG)
@@ -44,10 +45,26 @@ def initialize_client(self, model: str, api_key: str):
 
     async def process_with_openai(
         self, prompt: str, topics: List[str], model: str, search_term: str
-    ) -> List[str]:
+    ) -> List[dict]:
         try:
-            full_prompt = f"""Search term: {search_term}\nCurrent topics: {', '.join(topics)}\n\n{prompt}\n\You only return a list of the k topics. K can be any number."""
-            # print(full_prompt)
+            full_prompt = f"""Search term: {search_term}
+Current topics: {', '.join(topics)}
+
+{prompt}
+
+IMPORTANT FORMATTING RULES:
+1. Do NOT use any markdown formatting (no asterisks, no bullet points, no bold/italic)
+2. Do NOT use numbers or bullet points
+3. Each suggestion must be on a new line
+4. Each line must be in the format: "topic: explanation"
+5. Keep explanations to one sentence
+6. Do not add any extra text or formatting
+
+Example format:
+visual-programming-language: A programming language that uses visual elements instead of text
+flow-based-programming: A programming paradigm where programs are built by connecting nodes
+"""
+            
             response = self.openai_client.chat.completions.create(
                 model=model,
                 messages=[{"role": "user", "content": full_prompt}],
@@ -56,32 +73,109 @@ async def process_with_openai(
             )
 
             suggestions = response.choices[0].message.content.strip().split("\n")
-            # Clean up suggestions (remove bullet points, numbers, etc.)
-            suggestions = [
-                s.lstrip("- ").lstrip("* ").lstrip("1234567890. ") for s in suggestions
-            ]
-            return [s for s in suggestions if s]  # Remove empty strings
+            # Process suggestions to extract topic and explanation
+            processed_suggestions = []
+            for s in suggestions:
+                # Clean up markdown formatting and numbers
+                s = s.strip()
+                # Remove numbers and dots at start (e.g., "1. ", "2. ")
+                s = re.sub(r'^\d+\.\s*', '', s)
+                # Remove bullet points and asterisks
+                s = re.sub(r'^[\*\-]\s*', '', s)
+                # Remove any remaining markdown formatting
+                s = re.sub(r'\*\*|\*|__|_', '', s)
+                # Remove any leading/trailing whitespace
+                s = s.strip()
+                
+                if not s:
+                    continue
+                
+                # Split on first colon
+                parts = s.split(":", 1)
+                if len(parts) == 2:
+                    topic = parts[0].strip()
+                    explanation = parts[1].strip()
+                    # Remove any remaining markdown from explanation
+                    explanation = re.sub(r'\*\*|\*|__|_', '', explanation)
+                    processed_suggestions.append({
+                        "topic": topic,
+                        "explanation": explanation
+                    })
+                else:
+                    # If no explanation provided, use the topic as is
+                    processed_suggestions.append({
+                        "topic": s.strip(),
+                        "explanation": f"Suggested as relevant to {search_term}"
+                    })
+            return processed_suggestions
 
         except Exception as e:
             raise HTTPException(status_code=500, detail=f"OpenAI API error: {str(e)}")
 
-    async def process_with_gemini(self, prompt: str, topics: List[str], search_term: str) -> List[str]:
+    async def process_with_gemini(self, prompt: str, topics: List[str], search_term: str) -> List[dict]:
         try:
             if not self.gemini_client:
                 raise HTTPException(status_code=500, detail="Gemini client not initialized")
 
-            full_prompt = f"""Search term: {search_term}\nCurrent topics: {', '.join(topics)}\n\n{prompt}\n\n You only return a list of the k topics. K can be any number. No other text."""
+            full_prompt = f"""Search term: {search_term}
+Current topics: {', '.join(topics)}
+
+{prompt}
+
+IMPORTANT FORMATTING RULES:
+1. Do NOT use any markdown formatting (no asterisks, no bullet points, no bold/italic)
+2. Do NOT use numbers or bullet points
+3. Each suggestion must be on a new line
+4. Each line must be in the format: "topic: explanation"
+5. Keep explanations to one sentence
+6. Do not add any extra text or formatting
+
+Example format:
+visual-programming-language: A programming language that uses visual elements instead of text
+flow-based-programming: A programming paradigm where programs are built by connecting nodes
+"""
 
             response = self.gemini_client.generate_content(full_prompt)
+            print("Raw response:", response.text)  # Debug print
 
             if response.text:
                 suggestions = response.text.strip().split("\n")
-                # Clean up suggestions (remove bullet points, numbers, etc.)
-                suggestions = [
-                    s.lstrip("- ").lstrip("* ").lstrip("1234567890. ")
-                    for s in suggestions
-                ]
-                return [s for s in suggestions if s]  # Remove empty strings
+                # Process suggestions to extract topic and explanation
+                processed_suggestions = []
+                for s in suggestions:
+                    # Clean up markdown formatting and numbers
+                    s = s.strip()
+                    # Remove numbers and dots at start (e.g., "1. ", "2. ")
+                    s = re.sub(r'^\d+\.\s*', '', s)
+                    # Remove bullet points and asterisks
+                    s = re.sub(r'^[\*\-]\s*', '', s)
+                    # Remove any remaining markdown formatting
+                    s = re.sub(r'\*\*|\*|__|_', '', s)
+                    # Remove any leading/trailing whitespace
+                    s = s.strip()
+                    
+                    if not s:
+                        continue
+                    
+                    # Split on first colon
+                    parts = s.split(":", 1)
+                    if len(parts) == 2:
+                        topic = parts[0].strip()
+                        explanation = parts[1].strip()
+                        # Remove any remaining markdown from explanation
+                        explanation = re.sub(r'\*\*|\*|__|_', '', explanation)
+                        processed_suggestions.append({
+                            "topic": topic,
+                            "explanation": explanation
+                        })
+                    else:
+                        # If no explanation provided, use the topic as is
+                        processed_suggestions.append({
+                            "topic": s.strip(),
+                            "explanation": f"Suggested as relevant to {search_term}"
+                        })
+                print("Processed suggestions:", processed_suggestions)  # Debug print
+                return processed_suggestions
             return []
 
         except Exception as e:
@@ -90,9 +184,9 @@ async def process_with_gemini(self, prompt: str, topics: List[str], search_term:
 
     async def process_topics(
         self, model: str, api_key: str, prompt: str, topics: List[str], search_term: str
-    ) -> List[str]:
+    ) -> List[dict]:
         """
-        Process topics using the specified AI model and return suggestions.
+        Process topics using the specified AI model and return suggestions with explanations.
         """
         # Enhanced debug logging
         # logger.debug("\n=== Incoming Request Validation ===")

package-lock.json

@@ -48,6 +48,7 @@
     "@eslint/js": "^9.15.0",
     "@playwright/test": "^1.49.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/bootstrap": "^5.2.10",
     "@types/chroma-js": "^2.4.4",
     "@types/classnames": "^2.3.4",
     "@types/file-saver": "^2.0.7",