body.html
Changed around line 1
+
+
AI Model Hub
+
Your Guide to the Best AI Models in the Industry
+
+
+
+
+
+
+
+
+
Filter by:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Stay updated with the latest in AI technology.
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://aimodelhub.scroll.pub
+ metaTags
+ editButton /edit.html
+ title AI Model Hub - Compare AI Models by Leading Providers
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "0d061b71-9942-4ef9-9820-ec28c490fdaa",
+ "object": "chat.completion",
+ "created": 1735528316,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\naimodelhub.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://aimodelhub.scroll.pub\nmetaTags\neditButton /edit.html\ntitle AI Model Hub - Compare AI Models by Leading Providers\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n \n\n\n \n \n \n\n \n \n\n \n \n \n \n\n\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n padding: 2rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nheader h1 {\n font-size: 2.5rem;\n color: var(--primary-color);\n margin-bottom: 0.5rem;\n}\n\n.search {\n max-width: 600px;\n margin: 0 auto 2rem;\n}\n\n.search input {\n width: 100%;\n padding: 0.75rem;\n border: 2px solid var(--primary-color);\n border-radius: 0.5rem;\n font-size: 1rem;\n}\n\n.filters {\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.filter-options {\n display: flex;\n justify-content: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n\n.filter-btn {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 0.5rem;\n background-color: var(--primary-color);\n color: white;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.filter-btn:hover {\n background-color: var(--secondary-color);\n}\n\n.model-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 1rem;\n}\n\n.model-card {\n background: white;\n border-radius: 0.5rem;\n box-shadow: var(--card-shadow);\n padding: 1.5rem;\n transition: transform 0.3s ease;\n}\n\n.model-card:hover {\n transform: translateY(-5px);\n}\n\n.model-card h3 {\n color: var(--primary-color);\n margin-bottom: 0.5rem;\n}\n\n.model-card p {\n margin-bottom: 0.5rem;\n}\n\nfooter {\n text-align: center;\n margin-top: 2rem;\n padding: 1rem;\n border-top: 1px solid #e2e8f0;\n}\n\n@media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n header h1 {\n font-size: 2rem;\n }\n\n .model-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\nconst models = [\n {\n name: \"OpenAI GPT-4\",\n speed: \"Fast\",\n accuracy: \"High\",\n pricing: \"Paid\",\n expertise: \"General Purpose\",\n imageUpload: false,\n fileUpload: true\n },\n {\n name: \"Google Bard\",\n speed: \"Medium\",\n accuracy: \"High\",\n pricing: \"Free\",\n expertise: \"Research & Education\",\n imageUpload: true,\n fileUpload: true\n },\n {\n name: \"Anthropic Claude\",\n speed: \"Fast\",\n accuracy: \"High\",\n pricing: \"Paid\",\n expertise: \"Business & Legal\",\n imageUpload: false,\n fileUpload: false\n },\n {\n name: \"Cohere Command\",\n speed: \"Fast\",\n accuracy: \"Medium\",\n pricing: \"Paid\",\n expertise: \"Marketing & Sales\",\n imageUpload: false,\n fileUpload: true\n }\n];\n\nconst modelGrid = document.getElementById('modelGrid');\nconst searchInput = document.getElementById('searchInput');\nconst filterButtons = document.querySelectorAll('.filter-btn');\n\nfunction renderModels(filteredModels) {\n modelGrid.innerHTML = filteredModels.map(model => `\n
AI Model Hub
\nYour Guide to the Best AI Models in the Industry
\n\n
\n `).join('');\n}\n\nfunction filterModels() {\n const searchTerm = searchInput.value.toLowerCase();\n const activeFilter = document.querySelector('.filter-btn.active')?.dataset.filter || 'all';\n\n const filteredModels = models.filter(model => {\n const matchesSearch = model.name.toLowerCase().includes(searchTerm);\n const matchesFilter = activeFilter === 'all' ||\n (activeFilter === 'free' && model.pricing === 'Free') ||\n (activeFilter === 'paid' && model.pricing === 'Paid') ||\n (activeFilter === 'image' && model.imageUpload) ||\n (activeFilter === 'file' && model.fileUpload);\n return matchesSearch && matchesFilter;\n });\n\n renderModels(filteredModels);\n}\n\nfilterButtons.forEach(button => {\n button.addEventListener('click', () => {\n filterButtons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');\n filterModels();\n });\n});\n\nsearchInput.addEventListener('input', filterModels);\n\n// Initial render\nrenderModels(models);\n---end---"${model.name}
\nSpeed: ${model.speed}
\nAccuracy: ${model.accuracy}
\nPricing: ${model.pricing}
\nExpertise: ${model.expertise}
\nImage Upload: ${model.imageUpload ? 'Yes' : 'No'}
\nFile Upload: ${model.fileUpload ? 'Yes' : 'No'}
\n+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 274,
+ "completion_tokens": 1582,
+ "total_tokens": 1856,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 274
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # aimodelhub.scroll.pub
+ Website generated by DeepSeek from prompt: 我想建一个介绍各个产商的AI大模型的网站，从生成速度，生成正确率，是否收费，擅长什么领域，是否可以上传图片上传文件等多方面进行比较。要求网站简洁清晰
script.js
Changed around line 1
+ const models = [
+ {
+ name: "OpenAI GPT-4",
+ speed: "Fast",
+ accuracy: "High",
+ pricing: "Paid",
+ expertise: "General Purpose",
+ imageUpload: false,
+ fileUpload: true
+ },
+ {
+ name: "Google Bard",
+ speed: "Medium",
+ accuracy: "High",
+ pricing: "Free",
+ expertise: "Research & Education",
+ imageUpload: true,
+ fileUpload: true
+ },
+ {
+ name: "Anthropic Claude",
+ speed: "Fast",
+ accuracy: "High",
+ pricing: "Paid",
+ expertise: "Business & Legal",
+ imageUpload: false,
+ fileUpload: false
+ },
+ {
+ name: "Cohere Command",
+ speed: "Fast",
+ accuracy: "Medium",
+ pricing: "Paid",
+ expertise: "Marketing & Sales",
+ imageUpload: false,
+ fileUpload: true
+ }
+ ];
+
+ const modelGrid = document.getElementById('modelGrid');
+ const searchInput = document.getElementById('searchInput');
+ const filterButtons = document.querySelectorAll('.filter-btn');
+
+ function renderModels(filteredModels) {
+ modelGrid.innerHTML = filteredModels.map(model => `
+
+
${model.name}
+
Speed: ${model.speed}
+
Accuracy: ${model.accuracy}
+
Pricing: ${model.pricing}
+
Expertise: ${model.expertise}
+
Image Upload: ${model.imageUpload ? 'Yes' : 'No'}
+
File Upload: ${model.fileUpload ? 'Yes' : 'No'}
+
+ `).join('');
+ }
+
+ function filterModels() {
+ const searchTerm = searchInput.value.toLowerCase();
+ const activeFilter = document.querySelector('.filter-btn.active')?.dataset.filter || 'all';
+
+ const filteredModels = models.filter(model => {
+ const matchesSearch = model.name.toLowerCase().includes(searchTerm);
+ const matchesFilter = activeFilter === 'all' ||
+ (activeFilter === 'free' && model.pricing === 'Free') ||
+ (activeFilter === 'paid' && model.pricing === 'Paid') ||
+ (activeFilter === 'image' && model.imageUpload) ||
+ (activeFilter === 'file' && model.fileUpload);
+ return matchesSearch && matchesFilter;
+ });
+
+ renderModels(filteredModels);
+ }
+
+ filterButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ filterButtons.forEach(btn => btn.classList.remove('active'));
+ button.classList.add('active');
+ filterModels();
+ });
+ });
+
+ searchInput.addEventListener('input', filterModels);
+
+ // Initial render
+ renderModels(models);
style.css
Changed around line 1
+ :root {
+ --primary-color: #2563eb;
+ --secondary-color: #1e40af;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ padding: 2rem;
+ }
+
+ header {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ header h1 {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ margin-bottom: 0.5rem;
+ }
+
+ .search {
+ max-width: 600px;
+ margin: 0 auto 2rem;
+ }
+
+ .search input {
+ width: 100%;
+ padding: 0.75rem;
+ border: 2px solid var(--primary-color);
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ }
+
+ .filters {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ .filter-options {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ flex-wrap: wrap;
+ }
+
+ .filter-btn {
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 0.5rem;
+ background-color: var(--primary-color);
+ color: white;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ .filter-btn:hover {
+ background-color: var(--secondary-color);
+ }
+
+ .model-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 1rem;
+ }
+
+ .model-card {
+ background: white;
+ border-radius: 0.5rem;
+ box-shadow: var(--card-shadow);
+ padding: 1.5rem;
+ transition: transform 0.3s ease;
+ }
+
+ .model-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .model-card h3 {
+ color: var(--primary-color);
+ margin-bottom: 0.5rem;
+ }
+
+ .model-card p {
+ margin-bottom: 0.5rem;
+ }
+
+ footer {
+ text-align: center;
+ margin-top: 2rem;
+ padding: 1rem;
+ border-top: 1px solid #e2e8f0;
+ }
+
+ @media (max-width: 768px) {
+ body {
+ padding: 1rem;
+ }
+
+ header h1 {
+ font-size: 2rem;
+ }
+
+ .model-grid {
+ grid-template-columns: 1fr;
+ }
+ }