1+ < html >
2+ < head >
3+ < title > AI Models</ title >
4+ < script src ="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js "> </ script >
5+ < script src ="https://cdn.tailwindcss.com "> </ script >
6+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css ">
7+ < link href ="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap " rel ="stylesheet ">
8+ < style >
9+ body {
10+ font-family : 'Roboto' , sans-serif;
11+ background-color : # 0f172a ;
12+ color : # e2e8f0 ;
13+ }
14+ </ style >
15+ </ head >
16+ < body >
17+ < div id ="app " class ="p-4 ">
18+ < div class ="flex items-center justify-between mb-4 ">
19+ < div class ="flex items-center space-x-2 ">
20+ < i class ="fas fa-home text-white "> </ i >
21+ < span class ="text-gray-400 "> venice.ai/chat/XZi</ span >
22+ </ div >
23+ < div class ="flex items-center space-x-2 ">
24+ < i class ="fas fa-share-alt text-white "> </ i >
25+ < i class ="fas fa-ellipsis-v text-white "> </ i >
26+ </ div >
27+ </ div >
28+ < div class ="flex items-center justify-between mb-4 ">
29+ < div class ="flex space-x-4 ">
30+ < button class ="text-white border-b-2 border-white pb-1 "> Text</ button >
31+ < button class ="text-gray-400 "> Image</ button >
32+ < button class ="text-gray-400 "> Code</ button >
33+ </ div >
34+ < div class ="relative ">
35+ < button class ="text-white flex items-center space-x-1 ">
36+ < span > Models</ span >
37+ < i class ="fas fa-chevron-down "> </ i >
38+ </ button >
39+ </ div >
40+ < div class ="flex items-center space-x-2 ">
41+ < i class ="fas fa-bell text-white "> </ i >
42+ < i class ="fas fa-cog text-white "> </ i >
43+ </ div >
44+ </ div >
45+ < div class ="space-y-4 ">
46+ < div class ="bg-gray-800 p-4 rounded-lg flex items-center justify-between ">
47+ < div class ="flex items-center space-x-4 ">
48+ < div class ="bg-red-600 text-white rounded-full w-10 h-10 flex items-center justify-center ">
49+ < span class ="font-bold "> L7</ span >
50+ </ div >
51+ < div >
52+ < div class ="flex items-center space-x-2 ">
53+ < span class ="text-white font-medium "> Llama 3.3 70B</ span >
54+ < span class ="bg-gray-600 text-gray-400 text-xs px-2 py-1 rounded "> DEFAULT</ span >
55+ < span class ="bg-yellow-500 text-gray-800 text-xs px-2 py-1 rounded "> BETA</ span >
56+ </ div >
57+ < div class ="text-gray-400 text-sm "> 30K • Web Search</ div >
58+ </ div >
59+ </ div >
60+ < i class ="fas fa-check-circle text-blue-500 "> </ i >
61+ </ div >
62+ < div class ="bg-gray-800 p-4 rounded-lg flex items-center justify-between ">
63+ < div class ="flex items-center space-x-4 ">
64+ < div class ="bg-blue-500 text-white rounded-full w-10 h-10 flex items-center justify-center ">
65+ < span class ="font-bold "> L3</ span >
66+ </ div >
67+ < div >
68+ < div class ="flex items-center space-x-2 ">
69+ < span class ="text-white font-medium "> Llama 3.2 3B</ span >
70+ </ div >
71+ < div class ="text-gray-400 text-sm "> 120K • Fastest</ div >
72+ </ div >
73+ </ div >
74+ </ div >
75+ < div class ="bg-gray-800 p-4 rounded-lg flex items-center justify-between ">
76+ < div class ="flex items-center space-x-4 ">
77+ < div class ="bg-purple-700 text-white rounded-full w-10 h-10 flex items-center justify-center ">
78+ < span class ="font-bold "> D7</ span >
79+ </ div >
80+ < div >
81+ < div class ="flex items-center space-x-2 ">
82+ < span class ="text-white font-medium "> Dolphin 72B</ span >
83+ < span class ="bg-gray-600 text-gray-400 text-xs px-2 py-1 rounded "> PRO</ span >
84+ </ div >
85+ < div class ="text-gray-400 text-sm "> 7K • Most Uncensored</ div >
86+ </ div >
87+ </ div >
88+ </ div >
89+ < div class ="bg-gray-800 p-4 rounded-lg flex items-center justify-between ">
90+ < div class ="flex items-center space-x-4 ">
91+ < div class ="bg-purple-500 text-white rounded-full w-10 h-10 flex items-center justify-center ">
92+ < span class ="font-bold "> L4</ span >
93+ </ div >
94+ < div >
95+ < div class ="flex items-center space-x-2 ">
96+ < span class ="text-white font-medium "> Llama 3.1 405B</ span >
97+ < span class ="bg-gray-600 text-gray-400 text-xs px-2 py-1 rounded "> PRO</ span >
98+ </ div >
99+ < div class ="text-gray-400 text-sm "> 58K • Most Intelligent • Web Search</ div >
100+ </ div >
101+ </ div >
102+ </ div >
103+ < div class ="bg-gray-800 p-4 rounded-lg flex items-center justify-between ">
104+ < div class ="flex items-center space-x-4 ">
105+ < div class ="bg-purple-700 text-white rounded-full w-10 h-10 flex items-center justify-center ">
106+ < span class ="font-bold "> Q3</ span >
107+ </ div >
108+ < div >
109+ < div class ="flex items-center space-x-2 ">
110+ < span class ="text-white font-medium "> Qwen 2.5 Code</ span >
111+ < span class ="bg-yellow-500 text-gray-800 text-xs px-2 py-1 rounded "> BETA</ span >
112+ < span class ="bg-gray-600 text-gray-400 text-xs px-2 py-1 rounded "> PRO</ span >
113+ </ div >
114+ < div class ="text-gray-400 text-sm "> 30K • Best for Code</ div >
115+ </ div >
116+ </ div >
117+ </ div >
118+ </ div >
119+ < div class ="bg-gray-800 p-4 rounded-lg mt-4 ">
120+ < div class ="flex items-center space-x-2 ">
121+ < i class ="fas fa-info-circle text-gray-400 "> </ i >
122+ < span class ="text-white font-medium "> What are Models?</ span >
123+ </ div >
124+ < p class ="text-gray-400 text-sm mt-2 "> Models provide different degrees of intelligence, functionality, and personality. Venice provides several state-of-the-art open-source AI models to choose from.</ p >
125+ </ div >
126+ < div class ="flex items-center space-x-4 mt-4 ">
127+ < button class ="bg-blue-500 text-white p-2 rounded-full ">
128+ < i class ="fas fa-comment-dots "> </ i >
129+ </ button >
130+ < button class ="bg-gray-800 text-white p-2 rounded-full ">
131+ < i class ="fas fa-image "> </ i >
132+ </ button >
133+ < button class ="bg-gray-800 text-white p-2 rounded-full ">
134+ < i class ="fas fa-code "> </ i >
135+ </ button >
136+ < button class ="bg-gray-800 text-white p-2 rounded-full ">
137+ < i class ="fas fa-globe "> </ i >
138+ </ button >
139+ </ div >
140+ </ div >
141+ < script >
142+ const { createApp, ref } = Vue
143+ createApp ( {
144+ setup ( ) {
145+ const message = ref ( 'Hello vue!' )
146+ return {
147+ message
148+ }
149+ }
150+ } ) . mount ( '#app' )
151+ </ script >
152+ </ body >
153+ </ html >
0 commit comments