| | <!DOCTYPE html> |
| | <html lang="zh-CN"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>全自动 LLM 情报中心</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> |
| | <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
| | <style> |
| | body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } |
| | .spin-slow { animation: spin 2s linear infinite; } |
| | @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
| | |
| | th.sortable { cursor: pointer; user-select: none; transition: background-color 0.2s; } |
| | th.sortable:hover { background-color: #e2e8f0; } |
| | th.active-sort { background-color: #dbeafe; color: #2563eb; } |
| | </style> |
| | </head> |
| | <body class="bg-slate-50 min-h-screen text-slate-800 flex flex-col"> |
| |
|
| | <div id="app" class="container mx-auto px-4 py-8 max-w-7xl flex-grow"> |
| | |
| | |
| | <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4"> |
| | <div> |
| | <h1 class="text-3xl font-extrabold text-slate-800 bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600"> |
| | <i class="fas fa-sort-amount-down-alt text-blue-600 mr-2"></i>LLM 情报中心 |
| | </h1> |
| | <p class="text-slate-500 mt-1 text-sm">支持按上下文、价格排序 | 数据源: OpenRouter API</p> |
| | </div> |
| | |
| | <div class="flex gap-3"> |
| | <div class="relative"> |
| | <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
| | <input v-model="searchQuery" type="text" placeholder="搜索模型名称/厂商..." |
| | class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none shadow-sm w-64 transition"> |
| | </div> |
| | |
| | <button @click="fetchData" :disabled="loading" |
| | class="flex items-center px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition shadow-md disabled:opacity-70 disabled:cursor-not-allowed"> |
| | <i class="fas fa-sync-alt mr-2" :class="{'spin-slow': loading}"></i> |
| | {{ loading ? '正在获取...' : '获取最新数据' }} |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden"> |
| | <div class="overflow-x-auto"> |
| | <table class="w-full text-sm text-left"> |
| | <thead class="text-xs text-slate-500 uppercase bg-slate-100 border-b border-slate-200"> |
| | <tr> |
| | <th class="px-6 py-4 font-bold whitespace-nowrap">模型名称 (ID)</th> |
| | <th class="px-6 py-4 font-bold whitespace-nowrap">厂商</th> |
| | <th class="px-6 py-4 font-bold whitespace-nowrap">类型</th> |
| | |
| | <th class="px-6 py-4 font-bold whitespace-nowrap">参数量</th> |
| |
|
| | <th @click="sortBy('context_length')" class="sortable px-6 py-4 font-bold whitespace-nowrap" :class="{'active-sort': currentSort === 'context_length'}"> |
| | 上下文 |
| | <i v-if="currentSort === 'context_length'" class="fas ml-1" :class="currentSortDir === 'asc' ? 'fa-arrow-up' : 'fa-arrow-down'"></i> |
| | <i v-else class="fas fa-sort text-slate-300 ml-1"></i> |
| | </th> |
| |
|
| | <th @click="sortBy('pricing_prompt')" class="sortable px-6 py-4 font-bold whitespace-nowrap" :class="{'active-sort': currentSort === 'pricing_prompt'}"> |
| | 输入价格 |
| | <i v-if="currentSort === 'pricing_prompt'" class="fas ml-1" :class="currentSortDir === 'asc' ? 'fa-arrow-up' : 'fa-arrow-down'"></i> |
| | <i v-else class="fas fa-sort text-slate-300 ml-1"></i> |
| | </th> |
| |
|
| | <th @click="sortBy('pricing_completion')" class="sortable px-6 py-4 font-bold whitespace-nowrap" :class="{'active-sort': currentSort === 'pricing_completion'}"> |
| | 输出价格 |
| | <i v-if="currentSort === 'pricing_completion'" class="fas ml-1" :class="currentSortDir === 'asc' ? 'fa-arrow-up' : 'fa-arrow-down'"></i> |
| | <i v-else class="fas fa-sort text-slate-300 ml-1"></i> |
| | </th> |
| | </tr> |
| | </thead> |
| | <tbody class="divide-y divide-slate-100"> |
| | <tr v-if="loading"> |
| | <td colspan="7" class="px-6 py-12 text-center text-slate-500"> |
| | <i class="fas fa-spinner fa-spin text-3xl mb-3 text-blue-500"></i> |
| | <p>正在获取全球模型数据...</p> |
| | </td> |
| | </tr> |
| | <tr v-else-if="sortedModels.length === 0"> |
| | <td colspan="7" class="px-6 py-12 text-center text-slate-500"> |
| | <i class="fas fa-inbox text-3xl mb-3 text-gray-300"></i> |
| | <p>暂无数据，请点击右上角按钮获取。</p> |
| | </td> |
| | </tr> |
| | <tr v-for="model in sortedModels" :key="model.id" class="hover:bg-blue-50 transition duration-150"> |
| | <td class="px-6 py-4 min-w-[200px]"> |
| | <div class="font-bold text-slate-800">{{ model.name }}</div> |
| | <div class="text-xs text-slate-400 font-mono mt-1">{{ model.id }}</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | {{ model.company }} |
| | </td> |
| | <td class="px-6 py-4"> |
| | <span :class="getTypeBadgeClass(model.type)" class="px-2 py-1 rounded text-xs font-medium border whitespace-nowrap"> |
| | {{ model.type }} |
| | </span> |
| | </td> |
| | <td class="px-6 py-4 font-mono text-slate-600 whitespace-nowrap"> |
| | {{ model.parameters }} |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <span class="font-bold text-slate-700 mr-2 w-16 text-right">{{ formatContext(model.context_length) }}</span> |
| | <div class="w-16 bg-gray-200 rounded-full h-1.5 hidden md:block"> |
| | <div class="bg-blue-500 h-1.5 rounded-full" :style="{ width: Math.min((model.context_length / 200000) * 100, 100) + '%' }"></div> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-6 py-4 font-mono text-xs text-slate-600 whitespace-nowrap"> |
| | {{ formatPriceDisplay(model.pricing_prompt) }} |
| | </td> |
| | <td class="px-6 py-4 font-mono text-xs text-slate-600 whitespace-nowrap"> |
| | {{ formatPriceDisplay(model.pricing_completion) }} |
| | </td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | <div class="px-6 py-3 bg-slate-50 border-t border-slate-200 text-xs text-slate-400"> |
| | 共 {{ sortedModels.length }} 个模型。点击表头可排序。 |
| | </div> |
| | </div> |
| |
|
| | </div> |
| |
|
| | |
| | <footer class="mt-8 py-4 text-center text-slate-500 text-sm"> |
| | Powered by 飙猪狂 |
| | </footer> |
| |
|
| | <script> |
| | const { createApp, ref, computed } = Vue; |
| | |
| | createApp({ |
| | setup() { |
| | const models = ref([]); |
| | const loading = ref(false); |
| | const searchQuery = ref(''); |
| | |
| | const currentSort = ref('context_length'); |
| | const currentSortDir = ref('desc'); |
| | |
| | const formatContext = (num) => { |
| | if (!num) return '0'; |
| | if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'; |
| | if (num >= 1000) return (num / 1000).toFixed(0) + 'k'; |
| | return num; |
| | }; |
| | |
| | const formatPriceDisplay = (val) => { |
| | if (val === 0) return 'Free'; |
| | return '$' + val.toFixed(2); |
| | }; |
| | |
| | const sortBy = (key) => { |
| | if (currentSort.value === key) { |
| | currentSortDir.value = currentSortDir.value === 'asc' ? 'desc' : 'asc'; |
| | } else { |
| | currentSort.value = key; |
| | currentSortDir.value = 'desc'; |
| | } |
| | }; |
| | |
| | const processModelData = (apiData) => { |
| | return apiData.map(item => { |
| | const idParts = item.id.split('/'); |
| | const companyRaw = idParts[0]; |
| | const nameRaw = item.name || idParts[1]; |
| | |
| | const companyMap = { |
| | 'openai': 'OpenAI', 'anthropic': 'Anthropic', 'google': 'Google', |
| | 'meta-llama': 'Meta', 'mistralai': 'Mistral AI', 'qwen': 'Alibaba Cloud', |
| | 'deepseek': 'DeepSeek', 'microsoft': 'Microsoft' |
| | }; |
| | const company = companyMap[companyRaw] || companyRaw.charAt(0).toUpperCase() + companyRaw.slice(1); |
| | |
| | const paramMatch = nameRaw.match(/(\d+)[bB]/); |
| | let parameters = paramMatch ? paramMatch[0].toUpperCase() : '-'; |
| | if (nameRaw.includes('GPT-4')) parameters = 'Unknown'; |
| | |
| | let type = '文生文'; |
| | const lowerName = nameRaw.toLowerCase(); |
| | if (lowerName.includes('vision') || lowerName.includes('vl') || lowerName.includes('4o')) type = '多模态'; |
| | else if (lowerName.includes('code')) type = '代码'; |
| | |
| | const p_prompt = parseFloat(item.pricing?.prompt || 0) * 1000000; |
| | const p_compl = parseFloat(item.pricing?.completion || 0) * 1000000; |
| | |
| | return { |
| | id: item.id, |
| | name: item.name, |
| | company: company, |
| | context_length: Number(item.context_length || 0), |
| | pricing_prompt: p_prompt, |
| | pricing_completion: p_compl, |
| | parameters: parameters, |
| | type: type |
| | }; |
| | }); |
| | }; |
| | |
| | const fetchData = async () => { |
| | loading.value = true; |
| | models.value = []; |
| | try { |
| | const response = await fetch('https://openrouter.ai/api/v1/models'); |
| | const result = await response.json(); |
| | if (result && result.data) { |
| | models.value = processModelData(result.data); |
| | } |
| | } catch (error) { |
| | console.error(error); |
| | alert("获取失败，请重试"); |
| | } finally { |
| | loading.value = false; |
| | } |
| | }; |
| | |
| | const sortedModels = computed(() => { |
| | let filtered = models.value; |
| | if (searchQuery.value) { |
| | const query = searchQuery.value.toLowerCase(); |
| | filtered = filtered.filter(m => |
| | m.name.toLowerCase().includes(query) || |
| | m.company.toLowerCase().includes(query) |
| | ); |
| | } |
| | |
| | return filtered.sort((a, b) => { |
| | let modifier = currentSortDir.value === 'desc' ? -1 : 1; |
| | let valA = a[currentSort.value]; |
| | let valB = b[currentSort.value]; |
| | if (valA < valB) return -1 * modifier; |
| | if (valA > valB) return 1 * modifier; |
| | return 0; |
| | }); |
| | }); |
| | |
| | const getTypeBadgeClass = (type) => { |
| | if (type.includes('多模态')) return 'bg-purple-100 text-purple-700 border-purple-200'; |
| | if (type.includes('代码')) return 'bg-yellow-100 text-yellow-700 border-yellow-200'; |
| | return 'bg-blue-50 text-blue-600 border-blue-200'; |
| | }; |
| | |
| | return { |
| | loading, |
| | searchQuery, |
| | fetchData, |
| | sortedModels, |
| | formatContext, |
| | formatPriceDisplay, |
| | getTypeBadgeClass, |
| | sortBy, |
| | currentSort, |
| | currentSortDir |
| | }; |
| | } |
| | }).mount('#app'); |
| | </script> |
| |
|
| | </body> |
| | </html> |
