update: Add frontend build script, enhance .gitignore, and update dependencies in requirements.txt

.gitignore

@@ -1,2 +1,5 @@
 .venv
-check_dataset.ipynb
+node_modules/
+__pycache__/
+*.pyc
+.env

README.md

@@ -1,5 +1,5 @@
 ---
-title: Rag Retrieval
+title: EnlightenQalb
 emoji: 🏆
 colorFrom: gray
 colorTo: red
@@ -8,6 +8,9 @@ sdk_version: 1.41.1
 app_file: app.py
 pinned: false
 license: mit
+build:
+  - pip install -r requirements.txt
+  - bash build.sh
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -8,6 +8,15 @@ import pandas as pd
 import numpy as np
 import torch as t
 import os
+import random
+import streamlit.components.v1 as components
+
+# Define the React component
+def search_results_component(query, results, key=None):
+    return components.declare_component(
+        "search_results",
+        path="frontend/build"  # Path to your built React component
+    )(query=query, results=results, key=key)
 
 # Cache the model loading
 @st.cache_resource
@@ -46,8 +55,7 @@ def debug_check_before_save(data_dict):
     
     return len(set(lengths.values())) == 1  # Returns True if all lengths match
 
-def save_reactions_to_dataset(user_type, username, query, results_mpnet, results_openai):
-    # First prepare the new data
+def save_reactions_to_dataset(user_type, username, query, results):
     data = {
         "user_type": [],
         "username": [],
@@ -56,23 +64,14 @@ def save_reactions_to_dataset(user_type, username, query, results_mpnet, results
         "model_type": [],
         "reaction": []
     }
-
-    # Add results from MPNet
-    for result in results_mpnet:
-        data["user_type"].append(user_type)
-        data["username"].append(username)
-        data["query"].append(query)
-        data["retrieved_text"].append(result["text"])
-        data["model_type"].append("all-mpnet-base-v2")
-        data["reaction"].append(result["reaction"])
-
-    # Add results from OpenAI
-    for result in results_openai:
+    
+    # Add results
+    for result in results:
         data["user_type"].append(user_type)
         data["username"].append(username)
         data["query"].append(query)
         data["retrieved_text"].append(result["text"])
-        data["model_type"].append("openai")
+        data["model_type"].append(result["model"])
         data["reaction"].append(result["reaction"])
 
     try:
@@ -228,80 +227,70 @@ def main():
             st.write(f"Time taken to compute scores: {end_time - start_time:.5f} seconds")
             st.session_state.search_performed = True
 
-        # Display results and collect reactions
         if st.session_state.search_performed and not st.session_state.results_saved:
-            st.subheader("Query Results")
-            st.write(f"Query: {query}")
-
-            # Display MPNet results
-            st.markdown("### Results from MPNet Model")
-            for idx in st.session_state.top_results_mpnet:
-                text = df.iloc[int(idx)]["ext"]
-                st.write(f"**Text:** {text}")
-
-                key = f"reaction_mpnet_{idx}"
-                if key not in st.session_state.reactions:
-                    st.session_state.reactions[key] = "🤷"
-
-                reaction = st.radio(
-                    label=f"Rate this MPNet result (Result {idx}):",
-                    options=["👎", "🤷", "👍"],
-                    index=["👎", "🤷", "👍"].index(st.session_state.reactions[key]),
-                    key=key,
-                    horizontal=True,
-                    on_change=update_reaction,
-                    args=("mpnet", idx)
+            st.subheader("Compare Results")
+            
+            # Prepare results in the required format
+            results = [
+                {
+                    "model": "all-mpnet-base-v2",
+                    "text": df.iloc[int(st.session_state.top_results_mpnet[0])]["ext"]
+                },
+                {
+                    "model": "openai",
+                    "text": df.iloc[int(st.session_state.top_results_openai[0])]["ext"]
+                }
+            ]
+            
+            # Use Streamlit's columns for side-by-side display
+            col1, col2 = st.columns(2)
+            
+            # Randomly decide which result goes in which column
+            if random.random() < 0.5:
+                results = results[::-1]
+            
+            with col1:
+                st.markdown("### Result A")
+                st.write(results[0]["text"])
+                reaction_a = st.radio(
+                    "Rate Result A:",
+                    ["👎", "🤷", "👍"],
+                    key=f"reaction_a",
+                    horizontal=True
                 )
-
-            # Display OpenAI results
-            st.markdown("### Results from OpenAI Model")
-            for idx in st.session_state.top_results_openai:
-                text = df.iloc[int(idx)]["ext"]
-                st.write(f"**Text:** {text}")
-
-                key = f"reaction_openai_{idx}"
-                if key not in st.session_state.reactions:
-                    st.session_state.reactions[key] = "🤷"
-
-                reaction = st.radio(
-                    label=f"Rate this OpenAI result (Result {idx}):",
-                    options=["👎", "🤷", "👍"],
-                    index=["👎", "🤷", "👍"].index(st.session_state.reactions[key]),
-                    key=key,
-                    horizontal=True,
-                    on_change=update_reaction,
-                    args=("openai", idx)
+            
+            with col2:
+                st.markdown("### Result B")
+                st.write(results[1]["text"])
+                reaction_b = st.radio(
+                    "Rate Result B:",
+                    ["👎", "🤷", "👍"],
+                    key=f"reaction_b",
+                    horizontal=True
                 )
 
-            # Save reactions button
-            if st.button("Save Reactions"):
-                # Collect MPNet results
-                results_mpnet = []
-                for idx in st.session_state.top_results_mpnet:
-                    key = f"reaction_mpnet_{idx}"
-                    results_mpnet.append({
-                        "text": df.iloc[int(idx)]["ext"],
-                        "reaction": st.session_state.reactions[key]
-                    })
-
-                # Collect OpenAI results
-                results_openai = []
-                for idx in st.session_state.top_results_openai:
-                    key = f"reaction_openai_{idx}"
-                    results_openai.append({
-                        "text": df.iloc[int(idx)]["ext"],
-                        "reaction": st.session_state.reactions[key]
-                    })
-
-                save_reactions_to_dataset(
-                    user_type, 
-                    st.session_state.username,
-                    query, 
-                    results_mpnet,
-                    results_openai
-                )
-                st.success("Reactions saved successfully!")
-                clear_search_state()
+        if st.button("Save Reactions"):
+            results_to_save = [
+                {
+                    "model": results[0]["model"],
+                    "text": results[0]["text"],
+                    "reaction": reaction_a
+                },
+                {
+                    "model": results[1]["model"],
+                    "text": results[1]["text"],
+                    "reaction": reaction_b
+                }
+            ]
+            
+            save_reactions_to_dataset(
+                user_type,
+                st.session_state.username,
+                query,
+                results_to_save
+            )
+            st.success("Reactions saved successfully!")
+            clear_search_state()
 
     except Exception as e:
         st.error(f"Failed to load database: {str(e)}")

build.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+cd frontend
+npm install
+npm run build
+cd ..

frontend/components/SearchResults.jsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent } from "@/components/ui/card";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { ArrowLeftRight } from "lucide-react";
+
+const SearchResults = ({ query, results, onSaveReactions }) => {
+  const [randomizedResults, setRandomizedResults] = useState([]);
+  const [reactions, setReactions] = useState({});
+  
+  // Randomize the order of results on initial load
+  useEffect(() => {
+    const modelA = results[0];
+    const modelB = results[1];
+    
+    // Randomly decide which model goes left/right
+    const isModelALeft = Math.random() < 0.5;
+    setRandomizedResults([
+      {
+        id: isModelALeft ? 'left' : 'right',
+        text: modelA.text,
+        originalModel: modelA.model
+      },
+      {
+        id: isModelALeft ? 'right' : 'left',
+        text: modelB.text,
+        originalModel: modelB.model
+      }
+    ]);
+  }, [results]);
+
+  const handleReactionChange = (position, value) => {
+    setReactions(prev => ({
+      ...prev,
+      [position]: value
+    }));
+  };
+
+  const handleSave = () => {
+    // Map reactions back to their original models
+    const mappedReactions = randomizedResults.map(result => ({
+      model: result.originalModel,
+      text: result.text,
+      reaction: reactions[result.id] || '🤷'
+    }));
+    onSaveReactions(mappedReactions);
+  };
+
+  return (
+    <div className="w-full space-y-6">
+      <div className="text-lg font-medium">Query: {query}</div>
+      
+      <div className="grid grid-cols-2 gap-4">
+        {randomizedResults.map((result) => (
+          <Card key={result.id} className="p-4">
+            <CardContent>
+              <div className="space-y-4">
+                <div className="text-sm font-medium">Result {result.id === 'left' ? 'A' : 'B'}</div>
+                <div className="min-h-32 p-4 bg-gray-50 rounded-lg">
+                  {result.text}
+                </div>
+                
+                <RadioGroup
+                  defaultValue="🤷"
+                  onValueChange={(value) => handleReactionChange(result.id, value)}
+                  className="flex justify-center space-x-4"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="👎" id={`thumbsdown-${result.id}`} />
+                    <Label htmlFor={`thumbsdown-${result.id}`}>👎</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="🤷" id={`neutral-${result.id}`} />
+                    <Label htmlFor={`neutral-${result.id}`}>🤷</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="👍" id={`thumbsup-${result.id}`} />
+                    <Label htmlFor={`thumbsup-${result.id}`}>👍</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Button 
+        onClick={handleSave}
+        className="w-full"
+      >
+        Save Reactions
+      </Button>
+    </div>
+  );
+};
+
+export default SearchResults;

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EnlightenQalb Results</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="./index.jsx"></script>
+</body>
+</html>

frontend/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import SearchResults from './components/SearchResults';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <SearchResults />
+  </React.StrictMode>
+);

package.json

@@ -0,0 +1,14 @@
+{
+    "name": "enlightenqalb",
+    "version": "1.0.0",
+    "dependencies": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "@radix-ui/react-radio-group": "^1.1.3",
+      "@radix-ui/react-label": "^2.0.2",
+      "lucide-react": "^0.263.1",
+      "class-variance-authority": "^0.7.0",
+      "clsx": "^2.0.0",
+      "tailwind-merge": "^1.14.0"
+    }
+  }

requirements.txt

@@ -1,4 +1,8 @@
-torch
-pandas
+streamlit>=1.41.1
+openai
 sentence-transformers
-openai
+huggingface-hub
+datasets
+pandas
+numpy
+torch