Hugging Face's logo

Spaces:
raphaelmansuy
/
anycoder-0f176898
Running

App Files Community
raphaelmansuy commited on
Commit
b0a0d50
·
verified ·
1 Parent(s): e6cb907

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +331 -59
index.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>AI Models Marketplace - Compare & Choose</title>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  * {
@@ -17,6 +17,7 @@
17
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
19
  --success-gradient: linear-gradient(135deg, #13f1fc 0%, #0470dc 100%);
 
20
  --card-bg: #ffffff;
21
  --text-primary: #2d3748;
22
  --text-secondary: #4a5568;
@@ -90,7 +91,7 @@
90
  .logo {
91
  width: 45px;
92
  height: 45px;
93
- background: var(--primary-gradient);
94
  border-radius: 12px;
95
  display: flex;
96
  align-items: center;
@@ -114,7 +115,7 @@
114
 
115
  h1 {
116
  font-size: 1.8rem;
117
- background: var(--primary-gradient);
118
  -webkit-background-clip: text;
119
  -webkit-text-fill-color: transparent;
120
  background-clip: text;
@@ -139,7 +140,7 @@
139
  .stat-value {
140
  font-size: 1.5rem;
141
  font-weight: bold;
142
- background: var(--primary-gradient);
143
  -webkit-background-clip: text;
144
  -webkit-text-fill-color: transparent;
145
  background-clip: text;
@@ -217,7 +218,7 @@
217
  left: -100%;
218
  width: 100%;
219
  height: 100%;
220
- background: var(--primary-gradient);
221
  transition: left 0.3s ease;
222
  z-index: -1;
223
  }
@@ -326,7 +327,7 @@
326
  left: 0;
327
  right: 0;
328
  height: 4px;
329
- background: var(--primary-gradient);
330
  transform: scaleX(0);
331
  transition: transform 0.3s ease;
332
  }
@@ -422,7 +423,7 @@
422
 
423
  .price-value.highlight {
424
  font-size: 1.25rem;
425
- background: var(--primary-gradient);
426
  -webkit-background-clip: text;
427
  -webkit-text-fill-color: transparent;
428
  background-clip: text;
@@ -489,7 +490,7 @@
489
  }
490
 
491
  .btn-primary {
492
- background: var(--primary-gradient);
493
  color: white;
494
  }
495
 
@@ -515,7 +516,7 @@
515
  right: 2rem;
516
  width: 60px;
517
  height: 60px;
518
- background: var(--primary-gradient);
519
  border-radius: 50%;
520
  display: flex;
521
  align-items: center;
@@ -546,6 +547,18 @@
546
  letter-spacing: 0.5px;
547
  }
548
 
 
 
 
 
 
 
 
 
 
 
 
 
549
  @media (max-width: 768px) {
550
  .header-content {
551
  flex-direction: column;
@@ -621,22 +634,26 @@
621
  <div class="header-content">
622
  <div class="logo-section">
623
  <div class="logo">
624
- <i class="fas fa-brain"></i>
625
  </div>
626
  <div>
627
- <h1>AI Models Marketplace</h1>
628
- <p style="color: var(--text-secondary); font-size: 0.875rem;">Compare and choose the best AI models
629
- for your needs</p>
 
 
 
 
630
  </div>
631
  </div>
632
  <div class="header-actions">
633
  <div class="stats">
634
  <div class="stat-item">
635
- <div class="stat-value" id="modelCount">12</div>
636
  <div class="stat-label">Models</div>
637
  </div>
638
  <div class="stat-item">
639
- <div class="stat-value" id="providerCount">8</div>
640
  <div class="stat-label">Providers</div>
641
  </div>
642
  </div>
@@ -655,6 +672,7 @@
655
  <button class="chip" data-filter="image">Image Generation</button>
656
  <button class="chip" data-filter="code">Code Generation</button>
657
  <button class="chip" data-filter="multimodal">Multimodal</button>
 
658
  </div>
659
  <select class="sort-dropdown" id="sortDropdown">
660
  <option value="price-low">Price: Low to High</option>
@@ -676,9 +694,9 @@
676
  const aiModels = [
677
  {
678
  id: 1,
679
- name: "GPT-4 Turbo",
680
  provider: "OpenAI",
681
- description: "Most capable model, optimized for chat, with improved instruction following and lower latency.",
682
  category: "text",
683
  pricePerInput: "$0.01",
684
  pricePerOutput: "$0.03",
@@ -690,23 +708,23 @@
690
  },
691
  {
692
  id: 2,
693
- name: "Claude 3 Opus",
694
  provider: "Anthropic",
695
- description: "Most powerful Claude model for complex tasks that require top-tier performance.",
696
  category: "text",
697
  pricePerInput: "$0.015",
698
  pricePerOutput: "$0.075",
699
  maxTokens: "200k",
700
  contextWindow: "200,000",
701
  modelType: "Text Generation",
702
- badge: "New",
703
  isFavorite: false
704
  },
705
  {
706
  id: 3,
707
- name: "Gemini Pro",
708
  provider: "Google",
709
- description: "Multimodal model that can understand text, images, audio, and video simultaneously.",
710
  category: "multimodal",
711
  pricePerInput: "$0.0005",
712
  pricePerOutput: "$0.0015",
@@ -718,9 +736,9 @@
718
  },
719
  {
720
  id: 4,
721
- name: "DALL-E 3",
722
  provider: "OpenAI",
723
- description: "State-of-the-art image generation model with unparalleled photorealism.",
724
  category: "image",
725
  pricePerInput: "$0.04",
726
  pricePerOutput: "$0.08",
@@ -732,7 +750,7 @@
732
  },
733
  {
734
  id: 5,
735
- name: "GPT-3.5 Turbo",
736
  provider: "OpenAI",
737
  description: "Fast and efficient model optimized for chat completions and API usage.",
738
  category: "text",
@@ -746,7 +764,7 @@
746
  },
747
  {
748
  id: 6,
749
- name: "Claude 3 Sonnet",
750
  provider: "Anthropic",
751
  description: "Balanced performance and speed, ideal for enterprise workloads.",
752
  category: "text",
@@ -760,21 +778,21 @@
760
  },
761
  {
762
  id: 7,
763
- name: "CodeLlama 34B",
764
  provider: "Meta",
765
  description: "Specialized model for code generation, debugging, and programming assistance.",
766
  category: "code",
767
  pricePerInput: "$0.0008",
768
  pricePerOutput: "$0.0024",
769
- maxTokens: "16k",
770
- contextWindow: "16,000",
771
  modelType: "Code Generation",
772
  badge: "Developer",
773
  isFavorite: false
774
  },
775
  {
776
  id: 8,
777
- name: "Midjourney v6",
778
  provider: "Midjourney",
779
  description: "Advanced AI art generator with stunning visual quality and style diversity.",
780
  category: "image",
@@ -788,10 +806,10 @@
788
  },
789
  {
790
  id: 9,
791
- name: "Llama 3 70B",
792
  provider: "Meta",
793
  description: "Open-source large language model with strong reasoning capabilities.",
794
- category: "text",
795
  pricePerInput: "$0.0007",
796
  pricePerOutput: "$0.0021",
797
  maxTokens: "8k",
@@ -802,10 +820,10 @@
802
  },
803
  {
804
  id: 10,
805
- name: "Stable Diffusion XL",
806
  provider: "Stability AI",
807
  description: "High-quality image generation with fine-grained control and customization.",
808
- category: "image",
809
  pricePerInput: "$0.02",
810
  pricePerOutput: "$0.04",
811
  maxTokens: "N/A",
@@ -816,21 +834,21 @@
816
  },
817
  {
818
  id: 11,
819
- name: "Copilot Enterprise",
820
- provider: "Microsoft",
821
- description: "AI-powered coding assistant integrated with Microsoft ecosystem.",
822
- category: "code",
823
- pricePerInput: "$0.003",
824
- pricePerOutput: "$0.009",
825
- maxTokens: "8k",
826
- contextWindow: "8,000",
827
- modelType: "Code Generation",
828
- badge: "Business",
829
  isFavorite: false
830
  },
831
  {
832
  id: 12,
833
- name: "Claude 3 Haiku",
834
  provider: "Anthropic",
835
  description: "Fast and compact model for near-instant responsiveness.",
836
  category: "text",
@@ -841,6 +859,174 @@
841
  modelType: "Text Generation",
842
  badge: "Fast",
843
  isFavorite: false
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
844
  }
845
  ];
846
 
@@ -852,11 +1038,15 @@
852
  const container = document.getElementById('cardsContainer');
853
  container.innerHTML = '';
854
 
855
- models.forEach(model => {
856
  const card = document.createElement('div');
857
  card.className = 'model-card';
 
 
 
 
858
  card.innerHTML = `
859
- ${model.badge ? `<div class="badge">${model.badge}</div>` : ''}
860
  <div class="card-header">
861
  <div class="model-info">
862
  <h3 class="model-name">${model.name}</h3>
@@ -941,7 +1131,12 @@
941
  if (category === 'all') {
942
  return aiModels;
943
  }
944
- return aiModels.filter(model => model.category === category);
 
 
 
 
 
945
  }
946
 
947
  function sortModels(models, sortBy) {
@@ -952,7 +1147,11 @@
952
  case 'price-high':
953
  return sorted.sort((a, b) => parseFloat(b.pricePerOutput.slice(1)) - parseFloat(a.pricePerOutput.slice(1)));
954
  case 'tokens':
955
- return sorted.sort((a, b) => parseInt(b.maxTokens) - parseInt(a.maxTokens));
 
 
 
 
956
  case 'name':
957
  return sorted.sort((a, b) => a.name.localeCompare(b.name));
958
  default:
@@ -963,21 +1162,83 @@
963
  function selectModel(modelId) {
964
  const model = aiModels.find(m => m.id === modelId);
965
  console.log('Selected model:', model);
966
- // Add animation effect
967
- event.target.style.transform = 'scale(0.95)';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
968
  setTimeout(() => {
969
- event.target.style.transform = '';
970
- }, 200);
 
971
  }
972
 
973
  function viewDetails(modelId) {
974
  const model = aiModels.find(m => m.id === modelId);
975
  console.log('View details for:', model);
976
- // Add animation effect
977
- event.target.style.transform = 'scale(0.95)';
978
- setTimeout(() => {
979
- event.target.style.transform = '';
980
- }, 200);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
981
  }
982
 
983
  // Filter chips
@@ -1013,7 +1274,14 @@
1013
 
1014
  // Floating action button
1015
  document.querySelector('.floating-action').addEventListener('click', function() {
1016
- console.log('Compare selected models');
 
 
 
 
 
 
 
1017
  this.style.transform = 'scale(1.1) rotate(180deg)';
1018
  setTimeout(() => {
1019
  this.style.transform = '';
@@ -1024,6 +1292,10 @@
1024
  document.addEventListener('DOMContentLoaded', function() {
1025
  const sorted = sortModels(aiModels, currentSort);
1026
  renderCards(sorted);
 
 
 
 
1027
  });
1028
  </script>
1029
  </body>
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>OpenRouter Models - Compare & Choose AI Models</title>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  * {
 
17
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
19
  --success-gradient: linear-gradient(135deg, #13f1fc 0%, #0470dc 100%);
20
+ --openrouter-gradient: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
21
  --card-bg: #ffffff;
22
  --text-primary: #2d3748;
23
  --text-secondary: #4a5568;
 
91
  .logo {
92
  width: 45px;
93
  height: 45px;
94
+ background: var(--openrouter-gradient);
95
  border-radius: 12px;
96
  display: flex;
97
  align-items: center;
 
115
 
116
  h1 {
117
  font-size: 1.8rem;
118
+ background: var(--openrouter-gradient);
119
  -webkit-background-clip: text;
120
  -webkit-text-fill-color: transparent;
121
  background-clip: text;
 
140
  .stat-value {
141
  font-size: 1.5rem;
142
  font-weight: bold;
143
+ background: var(--openrouter-gradient);
144
  -webkit-background-clip: text;
145
  -webkit-text-fill-color: transparent;
146
  background-clip: text;
 
218
  left: -100%;
219
  width: 100%;
220
  height: 100%;
221
+ background: var(--openrouter-gradient);
222
  transition: left 0.3s ease;
223
  z-index: -1;
224
  }
 
327
  left: 0;
328
  right: 0;
329
  height: 4px;
330
+ background: var(--openrouter-gradient);
331
  transform: scaleX(0);
332
  transition: transform 0.3s ease;
333
  }
 
423
 
424
  .price-value.highlight {
425
  font-size: 1.25rem;
426
+ background: var(--openrouter-gradient);
427
  -webkit-background-clip: text;
428
  -webkit-text-fill-color: transparent;
429
  background-clip: text;
 
490
  }
491
 
492
  .btn-primary {
493
+ background: var(--openrouter-gradient);
494
  color: white;
495
  }
496
 
 
516
  right: 2rem;
517
  width: 60px;
518
  height: 60px;
519
+ background: var(--openrouter-gradient);
520
  border-radius: 50%;
521
  display: flex;
522
  align-items: center;
 
547
  letter-spacing: 0.5px;
548
  }
549
 
550
+ .anycoder-link {
551
+ color: #667eea;
552
+ text-decoration: none;
553
+ font-size: 0.875rem;
554
+ transition: var(--transition);
555
+ }
556
+
557
+ .anycoder-link:hover {
558
+ color: #764ba2;
559
+ text-decoration: underline;
560
+ }
561
+
562
  @media (max-width: 768px) {
563
  .header-content {
564
  flex-direction: column;
 
634
  <div class="header-content">
635
  <div class="logo-section">
636
  <div class="logo">
637
+ <i class="fas fa-route"></i>
638
  </div>
639
  <div>
640
+ <h1>OpenRouter Models</h1>
641
+ <p style="color: var(--text-secondary); font-size: 0.875rem;">
642
+ Compare and choose the best AI models |
643
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
644
+ Built with anycoder
645
+ </a>
646
+ </p>
647
  </div>
648
  </div>
649
  <div class="header-actions">
650
  <div class="stats">
651
  <div class="stat-item">
652
+ <div class="stat-value" id="modelCount">24</div>
653
  <div class="stat-label">Models</div>
654
  </div>
655
  <div class="stat-item">
656
+ <div class="stat-value" id="providerCount">12</div>
657
  <div class="stat-label">Providers</div>
658
  </div>
659
  </div>
 
672
  <button class="chip" data-filter="image">Image Generation</button>
673
  <button class="chip" data-filter="code">Code Generation</button>
674
  <button class="chip" data-filter="multimodal">Multimodal</button>
675
+ <button class="chip" data-filter="open-source">Open Source</button>
676
  </div>
677
  <select class="sort-dropdown" id="sortDropdown">
678
  <option value="price-low">Price: Low to High</option>
 
694
  const aiModels = [
695
  {
696
  id: 1,
697
+ name: "gpt-4-turbo-preview",
698
  provider: "OpenAI",
699
+ description: "Latest GPT-4 Turbo model with improved instruction following and 128k context window.",
700
  category: "text",
701
  pricePerInput: "$0.01",
702
  pricePerOutput: "$0.03",
 
708
  },
709
  {
710
  id: 2,
711
+ name: "claude-3-opus",
712
  provider: "Anthropic",
713
+ description: "Most powerful Claude model for complex tasks with 200k context window.",
714
  category: "text",
715
  pricePerInput: "$0.015",
716
  pricePerOutput: "$0.075",
717
  maxTokens: "200k",
718
  contextWindow: "200,000",
719
  modelType: "Text Generation",
720
+ badge: "Top Tier",
721
  isFavorite: false
722
  },
723
  {
724
  id: 3,
725
+ name: "gemini-pro",
726
  provider: "Google",
727
+ description: "Google's multimodal model with 32k context, supporting text and images.",
728
  category: "multimodal",
729
  pricePerInput: "$0.0005",
730
  pricePerOutput: "$0.0015",
 
736
  },
737
  {
738
  id: 4,
739
+ name: "dall-e-3",
740
  provider: "OpenAI",
741
+ description: "State-of-the-art image generation model with photorealistic capabilities.",
742
  category: "image",
743
  pricePerInput: "$0.04",
744
  pricePerOutput: "$0.08",
 
750
  },
751
  {
752
  id: 5,
753
+ name: "gpt-3.5-turbo",
754
  provider: "OpenAI",
755
  description: "Fast and efficient model optimized for chat completions and API usage.",
756
  category: "text",
 
764
  },
765
  {
766
  id: 6,
767
+ name: "claude-3-sonnet",
768
  provider: "Anthropic",
769
  description: "Balanced performance and speed, ideal for enterprise workloads.",
770
  category: "text",
 
778
  },
779
  {
780
  id: 7,
781
+ name: "codellama-70b-instruct",
782
  provider: "Meta",
783
  description: "Specialized model for code generation, debugging, and programming assistance.",
784
  category: "code",
785
  pricePerInput: "$0.0008",
786
  pricePerOutput: "$0.0024",
787
+ maxTokens: "4k",
788
+ contextWindow: "4,000",
789
  modelType: "Code Generation",
790
  badge: "Developer",
791
  isFavorite: false
792
  },
793
  {
794
  id: 8,
795
+ name: "midjourney-v6",
796
  provider: "Midjourney",
797
  description: "Advanced AI art generator with stunning visual quality and style diversity.",
798
  category: "image",
 
806
  },
807
  {
808
  id: 9,
809
+ name: "llama-3-70b-instruct",
810
  provider: "Meta",
811
  description: "Open-source large language model with strong reasoning capabilities.",
812
+ category: ["text", "open-source"],
813
  pricePerInput: "$0.0007",
814
  pricePerOutput: "$0.0021",
815
  maxTokens: "8k",
 
820
  },
821
  {
822
  id: 10,
823
+ name: "stable-diffusion-xl",
824
  provider: "Stability AI",
825
  description: "High-quality image generation with fine-grained control and customization.",
826
+ category: ["image", "open-source"],
827
  pricePerInput: "$0.02",
828
  pricePerOutput: "$0.04",
829
  maxTokens: "N/A",
 
834
  },
835
  {
836
  id: 11,
837
+ name: "mistral-large",
838
+ provider: "Mistral AI",
839
+ description: "Flagship model with top-tier reasoning capabilities and multilingual support.",
840
+ category: "text",
841
+ pricePerInput: "$0.008",
842
+ pricePerOutput: "$0.024",
843
+ maxTokens: "32k",
844
+ contextWindow: "32,000",
845
+ modelType: "Text Generation",
846
+ badge: "New",
847
  isFavorite: false
848
  },
849
  {
850
  id: 12,
851
+ name: "claude-3-haiku",
852
  provider: "Anthropic",
853
  description: "Fast and compact model for near-instant responsiveness.",
854
  category: "text",
 
859
  modelType: "Text Generation",
860
  badge: "Fast",
861
  isFavorite: false
862
+ },
863
+ {
864
+ id: 13,
865
+ name: "mistral-medium",
866
+ provider: "Mistral AI",
867
+ description: "Balanced performance model suitable for most use cases.",
868
+ category: "text",
869
+ pricePerInput: "$0.0027",
870
+ pricePerOutput: "$0.0081",
871
+ maxTokens: "32k",
872
+ contextWindow: "32,000",
873
+ modelType: "Text Generation",
874
+ badge: null,
875
+ isFavorite: false
876
+ },
877
+ {
878
+ id: 14,
879
+ name: "mistral-small",
880
+ provider: "Mistral AI",
881
+ description: "Lightweight model for simple tasks and cost-effective operations.",
882
+ category: "text",
883
+ pricePerInput: "$0.0002",
884
+ pricePerOutput: "$0.0006",
885
+ maxTokens: "32k",
886
+ contextWindow: "32,000",
887
+ modelType: "Text Generation",
888
+ badge: "Economy",
889
+ isFavorite: false
890
+ },
891
+ {
892
+ id: 15,
893
+ name: "gemma-7b-it",
894
+ provider: "Google",
895
+ description: "Lightweight, state-of-the-art open model from Google.",
896
+ category: ["text", "open-source"],
897
+ pricePerInput: "$0.0001",
898
+ pricePerOutput: "$0.0003",
899
+ maxTokens: "8k",
900
+ contextWindow: "8,000",
901
+ modelType: "Text Generation",
902
+ badge: "Open Source",
903
+ isFavorite: false
904
+ },
905
+ {
906
+ id: 16,
907
+ name: "command-r-plus",
908
+ provider: "Cohere",
909
+ description: "Enterprise-grade model with RAG capabilities and tool use.",
910
+ category: "text",
911
+ pricePerInput: "$0.003",
912
+ pricePerOutput: "$0.015",
913
+ maxTokens: "128k",
914
+ contextWindow: "128,000",
915
+ modelType: "Text Generation",
916
+ badge: "Enterprise",
917
+ isFavorite: false
918
+ },
919
+ {
920
+ id: 17,
921
+ name: "qwen-2-72b-instruct",
922
+ provider: "Alibaba",
923
+ description: "Powerful multilingual model with strong reasoning in 27 languages.",
924
+ category: ["text", "open-source"],
925
+ pricePerInput: "$0.0009",
926
+ pricePerOutput: "$0.0027",
927
+ maxTokens: "32k",
928
+ contextWindow: "32,000",
929
+ modelType: "Text Generation",
930
+ badge: "Multilingual",
931
+ isFavorite: false
932
+ },
933
+ {
934
+ id: 18,
935
+ name: "deepseek-coder",
936
+ provider: "DeepSeek",
937
+ description: "Specialized coding model with 16k context for complex programming tasks.",
938
+ category: ["code", "open-source"],
939
+ pricePerInput: "$0.00014",
940
+ pricePerOutput: "$0.00028",
941
+ maxTokens: "16k",
942
+ contextWindow: "16,000",
943
+ modelType: "Code Generation",
944
+ badge: "Open Source",
945
+ isFavorite: false
946
+ },
947
+ {
948
+ id: 19,
949
+ name: "nous-hermes-2-mixtral-8x7b-dpo",
950
+ provider: "Nous Research",
951
+ description: "Fine-tuned Mixtral model with DPO for better instruction following.",
952
+ category: ["text", "open-source"],
953
+ pricePerInput: "$0.0005",
954
+ pricePerOutput: "$0.0015",
955
+ maxTokens: "32k",
956
+ contextWindow: "32,000",
957
+ modelType: "Text Generation",
958
+ badge: "Open Source",
959
+ isFavorite: false
960
+ },
961
+ {
962
+ id: 20,
963
+ name: "mixtral-8x7b-instruct",
964
+ provider: "Mistral AI",
965
+ description: "Mixture of Experts model with excellent performance and efficiency.",
966
+ category: ["text", "open-source"],
967
+ pricePerInput: "$0.0005",
968
+ pricePerOutput: "$0.0015",
969
+ maxTokens: "32k",
970
+ contextWindow: "32,000",
971
+ modelType: "Text Generation",
972
+ badge: "MoE",
973
+ isFavorite: false
974
+ },
975
+ {
976
+ id: 21,
977
+ name: "gpt-4-vision-preview",
978
+ provider: "OpenAI",
979
+ description: "GPT-4 with vision capabilities for image understanding and analysis.",
980
+ category: "multimodal",
981
+ pricePerInput: "$0.01",
982
+ pricePerOutput: "$0.03",
983
+ maxTokens: "128k",
984
+ contextWindow: "128,000",
985
+ modelType: "Multimodal",
986
+ badge: "Vision",
987
+ isFavorite: false
988
+ },
989
+ {
990
+ id: 22,
991
+ name: "palm-2-chat-bison",
992
+ provider: "Google",
993
+ description: "Google's chat model optimized for conversational AI applications.",
994
+ category: "text",
995
+ pricePerInput: "$0.0005",
996
+ pricePerOutput: "$0.0015",
997
+ maxTokens: "8k",
998
+ contextWindow: "8,000",
999
+ modelType: "Text Generation",
1000
+ badge: null,
1001
+ isFavorite: false
1002
+ },
1003
+ {
1004
+ id: 23,
1005
+ name: "wizardlm-2-8x22b",
1006
+ provider: "Microsoft",
1007
+ description: "Advanced instruction-following model with complex reasoning.",
1008
+ category: ["text", "open-source"],
1009
+ pricePerInput: "$0.001",
1010
+ pricePerOutput: "$0.003",
1011
+ maxTokens: "65k",
1012
+ contextWindow: "65,000",
1013
+ modelType: "Text Generation",
1014
+ badge: "Open Source",
1015
+ isFavorite: false
1016
+ },
1017
+ {
1018
+ id: 24,
1019
+ name: "solar-10.7b-instruct",
1020
+ provider: "Upstage",
1021
+ description: "Compact yet powerful model with 10.7B parameters and strong performance.",
1022
+ category: ["text", "open-source"],
1023
+ pricePerInput: "$0.0005",
1024
+ pricePerOutput: "$0.0015",
1025
+ maxTokens: "4k",
1026
+ contextWindow: "4,000",
1027
+ modelType: "Text Generation",
1028
+ badge: "Compact",
1029
+ isFavorite: false
1030
  }
1031
  ];
1032
 
 
1038
  const container = document.getElementById('cardsContainer');
1039
  container.innerHTML = '';
1040
 
1041
+ models.forEach((model, index) => {
1042
  const card = document.createElement('div');
1043
  card.className = 'model-card';
1044
+ card.style.animationDelay = `${index * 0.1}s`;
1045
+
1046
+ const badges = model.badge ? `<div class="badge">${model.badge}</div>` : '';
1047
+
1048
  card.innerHTML = `
1049
+ ${badges}
1050
  <div class="card-header">
1051
  <div class="model-info">
1052
  <h3 class="model-name">${model.name}</h3>
 
1131
  if (category === 'all') {
1132
  return aiModels;
1133
  }
1134
+ return aiModels.filter(model => {
1135
+ if (Array.isArray(model.category)) {
1136
+ return model.category.includes(category);
1137
+ }
1138
+ return model.category === category;
1139
+ });
1140
  }
1141
 
1142
  function sortModels(models, sortBy) {
 
1147
  case 'price-high':
1148
  return sorted.sort((a, b) => parseFloat(b.pricePerOutput.slice(1)) - parseFloat(a.pricePerOutput.slice(1)));
1149
  case 'tokens':
1150
+ return sorted.sort((a, b) => {
1151
+ const aTokens = a.maxTokens === 'N/A' ? 0 : parseInt(a.maxTokens.replace('k', '000'));
1152
+ const bTokens = b.maxTokens === 'N/A' ? 0 : parseInt(b.maxTokens.replace('k', '000'));
1153
+ return bTokens - aTokens;
1154
+ });
1155
  case 'name':
1156
  return sorted.sort((a, b) => a.name.localeCompare(b.name));
1157
  default:
 
1162
  function selectModel(modelId) {
1163
  const model = aiModels.find(m => m.id === modelId);
1164
  console.log('Selected model:', model);
1165
+
1166
+ // Create a toast notification
1167
+ const toast = document.createElement('div');
1168
+ toast.style.cssText = `
1169
+ position: fixed;
1170
+ bottom: 2rem;
1171
+ left: 50%;
1172
+ transform: translateX(-50%);
1173
+ background: var(--openrouter-gradient);
1174
+ color: white;
1175
+ padding: 1rem 2rem;
1176
+ border-radius: 50px;
1177
+ box-shadow: var(--shadow-xl);
1178
+ z-index: 1000;
1179
+ animation: slideUp 0.3s ease-out;
1180
+ `;
1181
+ toast.textContent = `Selected ${model.name}`;
1182
+ document.body.appendChild(toast);
1183
+
1184
  setTimeout(() => {
1185
+ toast.style.animation = 'slideDown 0.3s ease-out';
1186
+ setTimeout(() => toast.remove(), 300);
1187
+ }, 2000);
1188
  }
1189
 
1190
  function viewDetails(modelId) {
1191
  const model = aiModels.find(m => m.id === modelId);
1192
  console.log('View details for:', model);
1193
+
1194
+ // Create a modal with details
1195
+ const modal = document.createElement('div');
1196
+ modal.style.cssText = `
1197
+ position: fixed;
1198
+ top: 0;
1199
+ left: 0;
1200
+ right: 0;
1201
+ bottom: 0;
1202
+ background: rgba(0,0,0,0.5);
1203
+ display: flex;
1204
+ align-items: center;
1205
+ justify-content: center;
1206
+ z-index: 1000;
1207
+ animation: fadeIn 0.3s ease-out;
1208
+ `;
1209
+
1210
+ modal.innerHTML = `
1211
+ <div style="background: white; padding: 2rem; border-radius: 20px; max-width: 500px; margin: 2rem;">
1212
+ <h2 style="margin-bottom: 1rem; color: var(--text-primary);">${model.name}</h2>
1213
+ <p style="color: var(--text-secondary); margin-bottom: 1rem;">${model.description}</p>
1214
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
1215
+ <div>
1216
+ <strong>Provider:</strong> ${model.provider}<br>
1217
+ <strong>Type:</strong> ${model.modelType}<br>
1218
+ <strong>Input Price:</strong> ${model.pricePerInput}/1K
1219
+ </div>
1220
+ <div>
1221
+ <strong>Output Price:</strong> ${model.pricePerOutput}/1K<br>
1222
+ <strong>Max Tokens:</strong> ${model.maxTokens}<br>
1223
+ <strong>Context:</strong> ${model.contextWindow}
1224
+ </div>
1225
+ </div>
1226
+ <button onclick="this.closest('div').parentElement.remove()" style="
1227
+ background: var(--openrouter-gradient);
1228
+ color: white;
1229
+ border: none;
1230
+ padding: 0.75rem 2rem;
1231
+ border-radius: 10px;
1232
+ cursor: pointer;
1233
+ font-weight: 600;
1234
+ ">Close</button>
1235
+ </div>
1236
+ `;
1237
+
1238
+ document.body.appendChild(modal);
1239
+ modal.addEventListener('click', function(e) {
1240
+ if (e.target === modal) modal.remove();
1241
+ });
1242
  }
1243
 
1244
  // Filter chips
 
1274
 
1275
  // Floating action button
1276
  document.querySelector('.floating-action').addEventListener('click', function() {
1277
+ if (favorites.size === 0) {
1278
+ alert('Please select some favorite models to compare!');
1279
+ return;
1280
+ }
1281
+
1282
+ const favoriteModels = aiModels.filter(m => favorites.has(m.id));
1283
+ console.log('Comparing models:', favoriteModels);
1284
+
1285
  this.style.transform = 'scale(1.1) rotate(180deg)';
1286
  setTimeout(() => {
1287
  this.style.transform = '';
 
1292
  document.addEventListener('DOMContentLoaded', function() {
1293
  const sorted = sortModels(aiModels, currentSort);
1294
  renderCards(sorted);
1295
+
1296
+ // Update stats
1297
+ document.getElementById('modelCount').textContent = aiModels.length;
1298
+ document.getElementById('providerCount').textContent = [...new Set(aiModels.map(m => m.provider))].length;
1299
  });
1300
  </script>
1301
  </body>