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