Merge pull request #5 from ManishMadan2882/main

Feature: Download data as CSV, Dark theme, submit benchmark

frontend/src/ThemeContext.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+interface ThemeContextType {
+  isDarkTheme: boolean;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(
+    localStorage.getItem('user-theme') === 'dark' || false,
+  );
+
+  useEffect(() => {
+    localStorage.setItem('user-theme', isDarkTheme ? 'dark' : 'light');
+    if (isDarkTheme) {
+      document.body.classList.add('dark');
+    } else {
+      document.body.classList.remove('dark');
+    }
+  }, [isDarkTheme]);
+
+  const toggleTheme = () => {
+    setIsDarkTheme(!isDarkTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDarkTheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+
+export const useTheme = (): ThemeContextType => {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+      throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+  };

frontend/src/components/BarGraph.tsx

@@ -5,6 +5,7 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart"
 import GraphIcon from '@/assets/graphs.svg'
+import { useTheme } from "@/ThemeContext"
 import { CartesianGrid, XAxis } from "recharts"
 type Pricing = {
   inference: string;
@@ -17,8 +18,7 @@ export function BarGraph({ title, chartData, chartConfig, info }: {
   chartConfig: any,
   info: string
 }) {
-  console.log(chartData);
-
+  const { isDarkTheme } = useTheme();
   return (
     <div className="flex justify-center text=#1E1E1E] my-8">
       <div className="border border-gray-300 rounded-xl w-11/12 flex flex-col  gap-6">
@@ -39,8 +39,8 @@ export function BarGraph({ title, chartData, chartConfig, info }: {
               tickFormatter={(value) => value.slice(0, 3)}
             />
             <ChartTooltip content={<ChartTooltipContent />} />
-            <Bar dataKey="ingestPrice" fill="#2A9D90" radius={4} />
-            <Bar dataKey="outputPrice" fill="#E76E50" radius={4} />
+            <Bar dataKey="ingestPrice" fill={isDarkTheme ? "#2662D9" : "#2A9D90"} radius={4} />
+            <Bar dataKey="outputPrice" fill={isDarkTheme ? "#E23670" : "#E76E50"} radius={4} />
           </BarChart>
         </ChartContainer>
         <h2 className="text-sm px-4 py-8">{info}</h2>

frontend/src/components/Nav.tsx

@@ -1,29 +1,40 @@
 import Compass from '@/assets/compass.svg'
 import Sun from '@/assets/day-sunny.svg'
+import Moon from '@/assets/moon.svg'
 import Github from '@/assets/git.svg'
 import Twitter from '@/assets/x.svg'
+import { useTheme } from '@/ThemeContext';
 
 const Nav = () => {
-  return (
-    <div className='flex justify-between items-baseline'>
-        <div className='flex gap-2'>
-            <img src={Compass} className=''/>
-            <span className='text-[#18181B] font-bold'>Compass</span>
-            <span className='text-[#8B8989]'>by Arc53</span>
-        </div>
-        <div className='flex gap-4'>
-            <a href='https://github.com/arc53/docsgpt'>
-                <img src={Github}/>
-            </a>
-            <a href='https://x.com/docsgptai'>
-                <img src={Twitter}/>
-            </a>
-            <button>
-                <img src={Sun}/>
-            </button>
+
+    const { isDarkTheme, toggleTheme } = useTheme();
+
+    return (
+        <div className='flex justify-between items-baseline'>
+            <div className='flex gap-2'>
+                <img src={Compass} className='filter dark:invert' />
+                <span className='text-[#18181B] font-bold dark:text-white'>Compass</span>
+                <span className='text-[#8B8989]'>by Arc53</span>
+            </div>
+            <div className='flex gap-4'>
+                <a target='_blank' href='https://github.com/arc53/docsgpt'>
+                    <img className='filter dark:invert' src={Github} />
+                </a>
+                <a target='_blank' href='https://x.com/docsgptai'>
+                    <img className='filter dark:invert' src={Twitter} />
+                </a>
+                <button
+                    id='theme'
+                    onClick={toggleTheme}>{
+                        isDarkTheme ?
+                            <img className='filter dark' src={Moon} />
+                            :
+                            <img className='filter dark:invert' src={Sun} />
+                    }
+                </button>
+            </div>
         </div>
-    </div>
-  )
+    )
 }
 
 export default Nav

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import { ThemeProvider } from './ThemeContext.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>,
 )

frontend/src/pages/LLMPriceCompass.tsx

@@ -84,7 +84,7 @@ const LLMPriceCompass = () => {
             <h1 className="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-5xl">
                 LLM Price Compass
             </h1>
-            <h2 className="leading-7 mt-2 text-xl text-[#1E1E1E]">
+            <h2 className="leading-7 mt-2 text-xl text-[#1E1E1E] dark:text-[#FDFDFD]">
                 Compare LLM inference on managed providers and GPU’s on Clouds
             </h2>
             <div className="flex justify-start gap-2 py-4">
@@ -93,7 +93,9 @@ const LLMPriceCompass = () => {
                 }}>
                     Explore Datagrid
                 </Button>
-                <Button variant="ghost">
+                <Button variant="ghost" onClick={()=>{
+                    window.location.href = 'https://github.com/arc53/llm-price-compass/issues/new?assignees=&labels=type%3A+benchmark&projects=&template=benchmark_submission.yml&title=%F0%9F%93%8A+Benchmark+Results%3A+'
+                }}>
                     Submit Benchmark
                 </Button>
             </div>

frontend/src/pages/LLMProviderComparison.tsx

@@ -1,7 +1,12 @@
 import Box from '@mui/material/Box';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
-import { useEffect, useState,useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import Papa from 'papaparse'
+import { useNavigate } from 'react-router';
+import { Button } from '@/components/ui/button';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { useTheme } from '@/ThemeContext';
+
 const csvPath = "https://raw.githubusercontent.com/arc53/llm-price-compass/main/LLM-Provider-comparison.csv"
 const typeCheckRow = (row: any) => {
   if ("Inference providers" in row
@@ -17,10 +22,10 @@ const typeCheckRow = (row: any) => {
 type LLMPrice = {
   "id": number;
   "Inference providers": string;
-  "LLama 3.1 8b instruct ingest price": number|null;
-  "LLama 3.1 8b instruct output price": number|null;
-  "LLama 3.1 70b instruct ingest price": number|null;
-  "LLama 3.1 70b instruct output price": number|null;
+  "LLama 3.1 8b instruct ingest price": number | null;
+  "LLama 3.1 8b instruct output price": number | null;
+  "LLama 3.1 70b instruct ingest price": number | null;
+  "LLama 3.1 70b instruct output price": number | null;
 }
 const currencyFormat = (value: number | null) => {
   if (value === null || value === undefined) {
@@ -72,13 +77,31 @@ const columns: GridColDef<LLMPrice>[] = [
   }
 ];
 
+
+
 export default function LLMProviderComparison() {
   const initialized = useRef(false)
   const [data, setData] = useState<LLMPrice[]>([])
+  const [csv, setCsv] = useState<string>('');
+  const { isDarkTheme } = useTheme();
+  const navigate = useNavigate();
+  const theme = useMemo(
+    () => {
+      console.log('came here');
+
+      return createTheme({
+        palette: {
+          mode: isDarkTheme ? 'dark' : 'light',
+        },
+      })
+    },
+    [isDarkTheme],
+  );
   const fetchCSVData = () => {
     fetch(csvPath)
       .then(res => res.text())
       .then(data => {
+        setCsv(data)
         Papa.parse(data, {
           header: true,
           skipEmptyLines: true,
@@ -89,7 +112,7 @@ export default function LLMProviderComparison() {
               results.data?.map((row: any, key: number) => {
 
                 if (typeCheckRow(row)) {
-                  let refinedRow:LLMPrice = {
+                  let refinedRow: LLMPrice = {
                     id: key,
                     "Inference providers": row["Inference providers"],
                     "LLama 3.1 8b instruct ingest price": preprocessCurrency(row["LLama 3.1 8b instruct ingest price"]),
@@ -105,27 +128,48 @@ export default function LLMProviderComparison() {
 
       })
   }
+  const downloadCSV = () => {
+    const csvData = new Blob([csv], { type: 'text/csv' });
+    const csvURL = URL.createObjectURL(csvData);
+    const link = document.createElement('a');
+    link.href = csvURL;
+    link.download = `llm_providers_comparison.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  useEffect(()=>console.log(isDarkTheme),[isDarkTheme])
   useEffect(() => {
     if (!initialized.current) {
-        initialized.current = true
-        fetchCSVData();
+      initialized.current = true
+      fetchCSVData();
     }
-}, [])
+  }, [])
   return (
     <div className='mt-20'>
-      <Box>
-      <DataGrid
-        rows={data}
-        columns={columns}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 10,
-            },
-          },
-        }}
-      />
-    </Box>
+      <div className='flex justify-between py-5'>
+        <Button onClick={() => navigate('/')}>
+          Back to main
+        </Button>
+        <Button onClick={downloadCSV}>
+          Download CSV
+        </Button>
+      </div>
+      <ThemeProvider theme={theme}>
+        <Box>
+          <DataGrid
+            rows={data}
+            columns={columns}
+            initialState={{
+              pagination: {
+                paginationModel: {
+                  pageSize: 10,
+                },
+              },
+            }}
+          />
+        </Box>
+      </ThemeProvider>
     </div>
   );
 }