Hugging Face's logo

Spaces:
Boobs00
/
ai-code-snippet-viewer
Running

App Files Community
Boobs00 commited on
Commit
6291f6d
·
verified ·
1 Parent(s): 23793ec

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +51 -41
  2. prompts.txt +2 -1
index.html CHANGED
@@ -11,45 +11,55 @@
11
  <style>
12
  .code-container {
13
  position: relative;
 
14
  }
15
  .copy-btn {
16
  position: absolute;
17
- right: 10px;
18
  top: 10px;
19
  opacity: 0;
20
  transition: opacity 0.2s;
 
21
  }
22
  .code-container:hover .copy-btn {
23
  opacity: 1;
24
  }
25
  .tab-active {
26
- border-bottom: 3px solid #3b82f6;
27
  color: #3b82f6;
28
  font-weight: 600;
29
  }
30
  pre {
31
  margin: 0;
32
  border-radius: 0.5rem;
 
 
33
  }
34
  .hljs {
35
  padding: 1.5rem !important;
36
  background: #1e293b !important;
37
  }
 
 
 
 
 
 
38
  </style>
39
  </head>
40
  <body class="bg-gray-50 min-h-screen">
41
  <div class="container mx-auto px-4 py-12 max-w-5xl">
42
  <div class="text-center mb-12">
43
- <h1 class="text-4xl font-bold text-gray-800 mb-2">AI Code Snippet Viewer</h1>
44
- <p class="text-gray-600 max-w-2xl mx-auto">
45
  Explore and copy ready-to-use code snippets for integrating various AI providers into your applications.
46
  </p>
47
  </div>
48
 
49
- <div class="bg-white rounded-xl shadow-lg overflow-hidden">
50
- <!-- Header with tabs -->
51
- <div class="border-b border-gray-200">
52
- <div class="flex px-6 pt-4">
53
  <div class="flex space-x-8">
54
  <button id="huggingface-tab" class="tab-active py-3 px-1 text-sm font-medium">
55
  Hugging Face
@@ -62,26 +72,26 @@
62
  </div>
63
 
64
  <!-- Content area -->
65
- <div class="p-6">
66
- <!-- Provider description -->
67
- <div id="huggingface-desc" class="mb-6">
68
- <h3 class="text-lg font-semibold text-gray-800 mb-2">Hugging Face Integration</h3>
69
- <p class="text-gray-600">
70
- This snippet demonstrates how to integrate Hugging Face's DeepSeek-R1 model into your Gradio application.
71
- The code loads the model from the AI Gradio registry with coder capabilities enabled.
72
- </p>
73
- </div>
74
-
75
- <div id="gemini-desc" class="mb-6 hidden">
76
- <h3 class="text-lg font-semibold text-gray-800 mb-2">Gemini Coder Integration</h3>
77
- <p class="text-gray-600">
78
- This snippet shows how to use Google's Gemini 2.5 Pro model with coder capabilities in your Gradio application.
79
- The model is loaded from the AI Gradio registry with the Together provider.
80
- </p>
81
  </div>
82
 
83
  <!-- Code display -->
84
- <div class="code-container">
85
  <pre id="code-display"><code class="language-python">import gradio as gr
86
  import ai_gradio
87
  gr.load(
@@ -95,26 +105,26 @@ gr.load(
95
  </button>
96
  </div>
97
 
98
- <!-- Demo section -->
99
- <div class="mt-8">
100
- <h3 class="text-lg font-semibold text-gray-800 mb-4">Live Demo</h3>
101
- <div class="bg-gray-100 rounded-lg p-6">
102
- <div class="flex items-center space-x-4 mb-4">
103
- <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">HF</div>
104
- <div>
105
- <p class="font-medium">Hugging Face Demo</p>
106
- <p class="text-sm text-gray-500">Try the DeepSeek-R1 model</p>
107
- </div>
108
- </div>
109
- <div class="bg-white rounded-lg p-4 shadow-inner">
110
- <p class="text-gray-600 italic">Demo interface would appear here...</p>
111
- </div>
112
- </div>
113
  </div>
114
  </div>
115
  </div>
116
 
117
- <div class="mt-8 text-center text-gray-500 text-sm">
118
  <p>Need help integrating these snippets? <a href="#" class="text-blue-500 hover:underline">Contact support</a></p>
119
  </div>
120
  </div>
 
11
  <style>
12
  .code-container {
13
  position: relative;
14
+ transform: scaleX(-1); /* Flip horizontally */
15
  }
16
  .copy-btn {
17
  position: absolute;
18
+ left: 10px; /* Changed from right to left */
19
  top: 10px;
20
  opacity: 0;
21
  transition: opacity 0.2s;
22
+ transform: scaleX(-1); /* Flip button back */
23
  }
24
  .code-container:hover .copy-btn {
25
  opacity: 1;
26
  }
27
  .tab-active {
28
+ border-top: 3px solid #3b82f6; /* Changed from bottom to top */
29
  color: #3b82f6;
30
  font-weight: 600;
31
  }
32
  pre {
33
  margin: 0;
34
  border-radius: 0.5rem;
35
+ transform: scaleX(-1); /* Flip code back */
36
+ direction: rtl; /* Right-to-left text */
37
  }
38
  .hljs {
39
  padding: 1.5rem !important;
40
  background: #1e293b !important;
41
  }
42
+ .flipped-card {
43
+ transform: scaleX(-1);
44
+ }
45
+ .flipped-content {
46
+ transform: scaleX(-1);
47
+ }
48
  </style>
49
  </head>
50
  <body class="bg-gray-50 min-h-screen">
51
  <div class="container mx-auto px-4 py-12 max-w-5xl">
52
  <div class="text-center mb-12">
53
+ <h1 class="text-4xl font-bold text-gray-800 mb-2 transform scaleX(-1)">AI Code Snippet Viewer</h1>
54
+ <p class="text-gray-600 max-w-2xl mx-auto transform scaleX(-1)">
55
  Explore and copy ready-to-use code snippets for integrating various AI providers into your applications.
56
  </p>
57
  </div>
58
 
59
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden flipped-card">
60
+ <!-- Header with tabs at the bottom -->
61
+ <div class="border-t border-gray-200"> <!-- Changed from border-b to border-t -->
62
+ <div class="flex px-6 pb-4"> <!-- Changed from pt-4 to pb-4 -->
63
  <div class="flex space-x-8">
64
  <button id="huggingface-tab" class="tab-active py-3 px-1 text-sm font-medium">
65
  Hugging Face
 
72
  </div>
73
 
74
  <!-- Content area -->
75
+ <div class="p-6 flipped-content">
76
+ <!-- Demo section at the top -->
77
+ <div class="mb-8">
78
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Live Demo</h3>
79
+ <div class="bg-gray-100 rounded-lg p-6">
80
+ <div class="flex items-center space-x-4 mb-4">
81
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">HF</div>
82
+ <div>
83
+ <p class="font-medium">Hugging Face Demo</p>
84
+ <p class="text-sm text-gray-500">Try the DeepSeek-R1 model</p>
85
+ </div>
86
+ </div>
87
+ <div class="bg-white rounded-lg p-4 shadow-inner">
88
+ <p class="text-gray-600 italic">Demo interface would appear here...</p>
89
+ </div>
90
+ </div>
91
  </div>
92
 
93
  <!-- Code display -->
94
+ <div class="code-container mb-6">
95
  <pre id="code-display"><code class="language-python">import gradio as gr
96
  import ai_gradio
97
  gr.load(
 
105
  </button>
106
  </div>
107
 
108
+ <!-- Provider description at the bottom -->
109
+ <div id="huggingface-desc">
110
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Hugging Face Integration</h3>
111
+ <p class="text-gray-600">
112
+ This snippet demonstrates how to integrate Hugging Face's DeepSeek-R1 model into your Gradio application.
113
+ The code loads the model from the AI Gradio registry with coder capabilities enabled.
114
+ </p>
115
+ </div>
116
+
117
+ <div id="gemini-desc" class="hidden">
118
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Gemini Coder Integration</h3>
119
+ <p class="text-gray-600">
120
+ This snippet shows how to use Google's Gemini 2.5 Pro model with coder capabilities in your Gradio application.
121
+ The model is loaded from the AI Gradio registry with the Together provider.
122
+ </p>
123
  </div>
124
  </div>
125
  </div>
126
 
127
+ <div class="mt-8 text-center text-gray-500 text-sm transform scaleX(-1)">
128
  <p>Need help integrating these snippets? <a href="#" class="text-blue-500 hover:underline">Contact support</a></p>
129
  </div>
130
  </div>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Reitorate and implement optimized and refined robust.
 
 
1
+ Reitorate and implement optimized and refined robust.
2
+ Flip it and reverse it.