Error Loading Data

{error}

\n window.location.reload()}\n className=\"mt-6 px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg shadow text-white transition-colors\"\n >\n Try Again\n \n

\n );\n }\n\n const tableHeaders = [\n { key: \"name\", label: \"Model Name\" },\n { key: \"provider\", label: \"Provider\" },\n { key: \"mode\", label: \"Mode\" },\n { key: \"inputCostPer1M\", label: \"Input/1M Tkns\" },\n { key: \"outputCostPer1M\", label: \"Output/1M Tkns\" },\n { key: \"maxTokens\", label: \"Max Tokens\" },\n ];\n\n // Chart colors\n const CHART_COLORS = [\"#8884d8\", \"#82ca9d\", \"#ffc658\", \"#ff8042\", \"#0088FE\", \"#00C49F\", \"#FFBB28\"];\n\n return (\n

\n LLM Analyzer & Comparator\n

Explore and compare leading language models.

\n\n {/* Filters Section */}\n

\n {/* Search Input */}\n

\n Search Model Name\n setSearchTerm(e.target.value)}\n />\n \n

\n {/* Provider Select */}\n

\n \n Filter by Provider\n \n setSelectedProvider(e.target.value)}\n >\n {providersList.map(p => )}\n \n

\n {/* Mode Select */}\n

\n Filter by Mode\n setSelectedMode(e.target.value)}\n >\n {modesList.map(m => )}\n \n

\n\n

\n {/* Models Table Section */}\n 0 ? \"lg:w-1/2\" : \"w-full\"\n }`}\n >\n

\n Available Models ({filteredModels.length})\n

\n {/* Added max-h for scrollability */}\n \n \n \n {tableHeaders.map(header => (\n requestSort(header.key)}\n >\n {header.label} {getSortIndicator(header.key)}\n \n ))}\n \n \n \n \n {filteredModels.length > 0\n ? filteredModels.map((model, index) => (\n \n \n \n \n \n \n \n \n \n ))\n : (\n \n \n \n )}\n \n

\n Actions\n
{model.name}	{model.provider}	{model.mode}	\n {formatCost(model.inputCostPer1M)}\n	\n {formatCost(model.outputCostPer1M)}\n	\n {formatTokens(model.maxTokens)}\n	\n toggleComparison(model.id)}\n title={comparisonSet.has(model.id) ? \"Remove from comparison\" : \"Add to comparison\"}\n className={`p-2 rounded-full transition-all duration-200 ease-in-out\n ${\n comparisonSet.has(model.id)\n ? \"bg-red-500 hover:bg-red-600 text-white\"\n : \"bg-blue-500 hover:bg-blue-600 text-white\"\n } transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 \n ${comparisonSet.has(model.id) ? \"focus:ring-red-500\" : \"focus:ring-blue-500\"}`}\n >\n {comparisonSet.has(model.id)\n ? \n : }\n \n
\n No models match your criteria. Try adjusting the filters.\n

\n\n {/* Comparison Section */}\n {comparisonModelsDetails.length > 0 && (\n \n

\n Model Comparison ({comparisonModelsDetails.length})\n

\n setShowComparison(!showComparison)}\n className=\"p-2 text-slate-400 hover:text-blue-400 transition-colors mr-2\"\n title={showComparison ? \"Hide Comparison\" : \"Show Comparison\"}\n >\n {showComparison ? : }\n \n \n Clear All\n \n

\n\n {showComparison && (\n

\n {/* Added max-h and overflow for scrollability */}\n {/* Cards for each compared model */}\n

\n {/* Adjust grid for better card layout */}\n {comparisonModelsDetails.map(model => {\n const devInput = comparisonAverages.avgInputCostPer1M > 0 && model.inputCostPer1M !== null\n ? ((model.inputCostPer1M - comparisonAverages.avgInputCostPer1M)\n / comparisonAverages.avgInputCostPer1M) * 100\n : null;\n const devOutput = comparisonAverages.avgOutputCostPer1M > 0 && model.outputCostPer1M !== null\n ? ((model.outputCostPer1M - comparisonAverages.avgOutputCostPer1M)\n / comparisonAverages.avgOutputCostPer1M) * 100\n : null;\n\n return (\n

{model.name}

\n \n toggleComparison(model.id)}\n title=\"Remove from comparison\"\n className=\"p-1 text-red-400 hover:text-red-300 transition-colors\"\n >\n \n \n

{model.provider} - {model.mode}

\n\n

\n Input/1M: {formatCost(model.inputCostPer1M)}\n {devInput !== null && (\n \n ({devInput.toFixed(0)}% vs avg)\n \n )}\n

\n Output/1M: {formatCost(model.outputCostPer1M)}\n {devOutput !== null && (\n \n ({devOutput.toFixed(0)}% vs avg)\n \n )}\n

\n Max Tokens: {formatTokens(model.maxTokens)}\n

\n {model.launch_date &&

Launched: {model.launch_date}

}\n {model.litellm_docs_url\n && (\n \n Docs \n \n )}\n

\n );\n })}\n

\n\n {/* Charts */}\n {comparisonModelsDetails.length > 0 && (\n

\n Cost Comparison (per 1M Tokens)\n

\n \n \n \n \n \n formatCost(value)}\n />\n \n \n {comparisonModelsDetails.map((entry, index) => (\n \n ))}\n \n \n {comparisonModelsDetails.map((entry, index) => (\n // Offset color\n ))}\n \n \n \n

\n Context Window (Max Tokens)\n

\n \n \n \n \n \n formatTokens(value)}\n />\n \n {comparisonModelsDetails.map((entry, index) => (\n \n ))}\n \n \n \n

\n )}\n

\n )}\n {!showComparison && comparisonModelsDetails.length > 0 && (\n

Comparison view is hidden.

\n \n

\n )}\n

\n )}\n {/* Prompt to select models if comparison is empty */}\n {comparisonModelsDetails.length === 0 && (\n

\n \n

Ready to Compare?

\n Select models from the table using the {\" \"}\n button to see their detailed comparison here.\n

\n )}\n \n\n \n \n );\n}\n\nexport default App;","deleted","label","children",[],[99],"files",[151],"counts",{"_173":32,"_174":175,"_176":32,"_177":32},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_103":152,"_95":99,"_153":115,"_154":-5,"_155":139,"_156":138,"_157":117,"_105":182,"_100":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":183},["D",1746565018324],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":192,"_149":197,"_169":201,"_180":202,"_178":204,"_205":-5,"_206":22,"_207":-5,"_208":-5,"_209":-5,"_210":211},{"_103":104,"_95":96,"_105":193,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":194,"_133":195,"_136":196,"_148":22},["D",1746564051860],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_103":139,"_140":104,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[198],{"_103":152,"_95":99,"_153":115,"_154":-5,"_155":139,"_156":138,"_157":117,"_105":158,"_100":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_166":199,"_98":200},[],[99],[198],{"_103":152,"_95":99,"_153":115,"_154":-5,"_155":139,"_156":138,"_157":117,"_105":182,"_100":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":203},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

mmabrouk

untitled-1615