Hugging Face's logo

Spaces:
abidlabs
/
closed2open
Running

App Files Community
abidlabs HF Staff commited on
Commit
afb9f5f
·
1 Parent(s): 04af860

changes

Browse files
Files changed (8) hide show
  1. audio.html +54 -0
  2. guardrails.html +54 -0
  3. index.html +81 -9
  4. multimodal.html +54 -0
  5. optimization.html +54 -0
  6. style.css +397 -16
  7. text.html +54 -0
  8. video.html +54 -0
audio.html ADDED
@@ -0,0 +1,54 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Audio - ClosedToOpen</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
+ <body>
10
+ <nav class="navbar">
11
+ <div class="nav-content">
12
+ <h1 class="nav-title">ClosedToOpen</h1>
13
+ <p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
14
+ </div>
15
+ </nav>
16
+
17
+ <main class="main-content">
18
+ <div class="breadcrumb">
19
+ <a href="index.html">← Back to Migration Guides</a>
20
+ </div>
21
+
22
+ <section class="topic-header">
23
+ <h1 class="topic-title">Audio</h1>
24
+ <p class="topic-description">Process and generate audio content with open-source models instead of proprietary APIs</p>
25
+ </section>
26
+
27
+ <section class="recipes-section">
28
+ <h2 class="section-title">Recipes</h2>
29
+ <div class="recipes-grid">
30
+ <div class="recipe-card">
31
+ <h3>Whisper API → Whisper.cpp</h3>
32
+ <p>Replace OpenAI's Whisper API with local Whisper implementation for speech-to-text</p>
33
+ <div class="recipe-status">Coming Soon</div>
34
+ </div>
35
+ <div class="recipe-card">
36
+ <h3>Text-to-Speech → Bark</h3>
37
+ <p>Generate natural speech using Bark instead of proprietary TTS services</p>
38
+ <div class="recipe-status">Coming Soon</div>
39
+ </div>
40
+ <div class="recipe-card">
41
+ <h3>Audio Classification</h3>
42
+ <p>Classify audio content using open-source models</p>
43
+ <div class="recipe-status">Coming Soon</div>
44
+ </div>
45
+ <div class="recipe-card">
46
+ <h3>Music Generation</h3>
47
+ <p>Generate music and audio content with open models</p>
48
+ <div class="recipe-status">Coming Soon</div>
49
+ </div>
50
+ </div>
51
+ </section>
52
+ </main>
53
+ </body>
54
+ </html>
guardrails.html ADDED
@@ -0,0 +1,54 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Guardrails - ClosedToOpen</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
+ <body>
10
+ <nav class="navbar">
11
+ <div class="nav-content">
12
+ <h1 class="nav-title">ClosedToOpen</h1>
13
+ <p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
14
+ </div>
15
+ </nav>
16
+
17
+ <main class="main-content">
18
+ <div class="breadcrumb">
19
+ <a href="index.html">← Back to Topics</a>
20
+ </div>
21
+
22
+ <section class="topic-header">
23
+ <h1 class="topic-title">Guardrails</h1>
24
+ <p class="topic-description">Implement safety and content filtering with open-source solutions</p>
25
+ </section>
26
+
27
+ <section class="recipes-section">
28
+ <h2 class="section-title">Recipes</h2>
29
+ <div class="recipes-grid">
30
+ <div class="recipe-card">
31
+ <h3>Content Moderation</h3>
32
+ <p>Build content moderation systems using open models</p>
33
+ <div class="recipe-status">Coming Soon</div>
34
+ </div>
35
+ <div class="recipe-card">
36
+ <h3>Prompt Injection Protection</h3>
37
+ <p>Protect against prompt injection attacks</p>
38
+ <div class="recipe-status">Coming Soon</div>
39
+ </div>
40
+ <div class="recipe-card">
41
+ <h3>Output Validation</h3>
42
+ <p>Validate and sanitize model outputs</p>
43
+ <div class="recipe-status">Coming Soon</div>
44
+ </div>
45
+ <div class="recipe-card">
46
+ <h3>Rate Limiting</h3>
47
+ <p>Implement rate limiting and usage controls</p>
48
+ <div class="recipe-status">Coming Soon</div>
49
+ </div>
50
+ </div>
51
+ </section>
52
+ </main>
53
+ </body>
54
+ </html>
index.html CHANGED
@@ -3,17 +3,89 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  </body>
19
  </html>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width" />
6
+ <title>ClosedToOpen - Transition from Closed to Open AI APIs</title>
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
+ <nav class="navbar">
11
+ <div class="nav-content">
12
+ <h1 class="nav-title">ClosedToOpen</h1>
13
+ <p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
14
+ </div>
15
+ </nav>
16
+
17
+ <main class="main-content">
18
+ <section class="recipes-overview">
19
+ <h2 class="section-title">Migration Guides</h2>
20
+ <div class="recipes-table">
21
+ <div class="recipe-row">
22
+ <div class="recipe-cell audio">
23
+ <h3>Audio</h3>
24
+ <div class="recipe-links">
25
+ <a href="audio.html#whisper" class="recipe-link">Whisper API → Whisper.cpp</a>
26
+ <a href="audio.html#tts" class="recipe-link">Text-to-Speech → Bark</a>
27
+ <a href="audio.html#classification" class="recipe-link">Audio Classification</a>
28
+ <a href="audio.html#music" class="recipe-link">Music Generation</a>
29
+ <a href="audio.html" class="recipe-link more-recipes">+ 3 more recipes</a>
30
+ </div>
31
+ </div>
32
+ <div class="recipe-cell video">
33
+ <h3>Video</h3>
34
+ <div class="recipe-links">
35
+ <a href="video.html#understanding" class="recipe-link">Video Understanding → Video-LLaMA</a>
36
+ <a href="video.html#generation" class="recipe-link">Video Generation → Stable Video Diffusion</a>
37
+ <a href="video.html#text" class="recipe-link">Video-to-Text</a>
38
+ <a href="video.html#editing" class="recipe-link">Video Editing</a>
39
+ <a href="video.html" class="recipe-link more-recipes">+ 2 more recipes</a>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ <div class="recipe-row">
44
+ <div class="recipe-cell multimodal">
45
+ <h3>Multimodal</h3>
46
+ <div class="recipe-links">
47
+ <a href="multimodal.html#gpt4v" class="recipe-link">GPT-4V → LLaVA</a>
48
+ <a href="multimodal.html#dalle" class="recipe-link">DALL-E → Stable Diffusion</a>
49
+ <a href="multimodal.html#whisper" class="recipe-link">Whisper → Whisper.cpp</a>
50
+ <a href="multimodal.html#video" class="recipe-link">Video Understanding</a>
51
+ <a href="multimodal.html" class="recipe-link more-recipes">+ 4 more recipes</a>
52
+ </div>
53
+ </div>
54
+ <div class="recipe-cell text">
55
+ <h3>Text</h3>
56
+ <div class="recipe-links">
57
+ <a href="text.html#gpt4" class="recipe-link">GPT-4 → Llama 3</a>
58
+ <a href="text.html#gpt35" class="recipe-link">GPT-3.5 → Mistral</a>
59
+ <a href="text.html#embeddings" class="recipe-link">Embeddings → Sentence Transformers</a>
60
+ <a href="text.html#finetuning" class="recipe-link">Fine-tuning → LoRA</a>
61
+ <a href="text.html" class="recipe-link more-recipes">+ 5 more recipes</a>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ <div class="recipe-row">
66
+ <div class="recipe-cell guardrails">
67
+ <h3>Guardrails</h3>
68
+ <div class="recipe-links">
69
+ <a href="guardrails.html#moderation" class="recipe-link">Content Moderation</a>
70
+ <a href="guardrails.html#injection" class="recipe-link">Prompt Injection Protection</a>
71
+ <a href="guardrails.html#validation" class="recipe-link">Output Validation</a>
72
+ <a href="guardrails.html#rate" class="recipe-link">Rate Limiting</a>
73
+ <a href="guardrails.html" class="recipe-link more-recipes">+ 6 more recipes</a>
74
+ </div>
75
+ </div>
76
+ <div class="recipe-cell optimization">
77
+ <h3>Optimization</h3>
78
+ <div class="recipe-links">
79
+ <a href="optimization.html#quantization" class="recipe-link">Model Quantization</a>
80
+ <a href="optimization.html#deployment" class="recipe-link">Local Deployment</a>
81
+ <a href="optimization.html#caching" class="recipe-link">Caching Strategies</a>
82
+ <a href="optimization.html#batch" class="recipe-link">Batch Processing</a>
83
+ <a href="optimization.html" class="recipe-link more-recipes">+ 3 more recipes</a>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </section>
89
+ </main>
90
  </body>
91
  </html>
multimodal.html ADDED
@@ -0,0 +1,54 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Multimodal - ClosedToOpen</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
+ <body>
10
+ <nav class="navbar">
11
+ <div class="nav-content">
12
+ <h1 class="nav-title">ClosedToOpen</h1>
13
+ <p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
14
+ </div>
15
+ </nav>
16
+
17
+ <main class="main-content">
18
+ <div class="breadcrumb">
19
+ <a href="index.html">← Back to Topics</a>
20
+ </div>
21
+
22
+ <section class="topic-header">
23
+ <h1 class="topic-title">Multimodal</h1>
24
+ <p class="topic-description">Process images, audio, and video with open-source multimodal models</p>
25
+ </section>
26
+
27
+ <section class="recipes-section">
28
+ <h2 class="section-title">Recipes</h2>
29
+ <div class="recipes-grid">
30
+ <div class="recipe-card">
31
+ <h3>GPT-4V → LLaVA</h3>
32
+ <p>Replace GPT-4V with LLaVA for image understanding tasks</p>
33
+ <div class="recipe-status">Coming Soon</div>
34
+ </div>
35
+ <div class="recipe-card">
36
+ <h3>DALL-E → Stable Diffusion</h3>
37
+ <p>Generate images using Stable Diffusion instead of DALL-E</p>
38
+ <div class="recipe-status">Coming Soon</div>
39
+ </div>
40
+ <div class="recipe-card">
41
+ <h3>Whisper → Whisper.cpp</h3>
42
+ <p>Use local Whisper implementation for speech-to-text</p>
43
+ <div class="recipe-status">Coming Soon</div>
44
+ </div>
45
+ <div class="recipe-card">
46
+ <h3>Video Understanding</h3>
47
+ <p>Process video content with open-source video models</p>
48
+ <div class="recipe-status">Coming Soon</div>
49
+ </div>
50
+ </div>
51
+ </section>
52
+ </main>
53
+ </body>
54
+ </html>
optimization.html ADDED
@@ -0,0 +1,54 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Optimization - ClosedToOpen</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
+ <body>
10
+ <nav class="navbar">
11
+ <div class="nav-content">
12
+ <h1 class="nav-title">ClosedToOpen</h1>
13
+ <p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
14
+ </div>
15
+ </nav>
16
+
17
+ <main class="main-content">
18
+ <div class="breadcrumb">
19
+ <a href="index.html">← Back to Topics</a>
20
+ </div>
21
+
22
+ <section class="topic-header">
23
+ <h1 class="topic-title">Optimization</h1>
24
+ <p class="topic-description">Optimize performance and reduce costs with open-source models</p>
25
+ </section>
26
+
27
+ <section class="recipes-section">
28
+ <h2 class="section-title">Recipes</h2>
29
+ <div class="recipes-grid">
30
+ <div class="recipe-card">
31
+ <h3>Model Quantization</h3>
32
+ <p>Reduce model size and inference time with quantization</p>
33
+ <div class="recipe-status">Coming Soon</div>
34
+ </div>
35
+ <div class="recipe-card">
36
+ <h3>Local Deployment</h3>
37
+ <p>Deploy models locally to reduce API costs</p>
38
+ <div class="recipe-status">Coming Soon</div>
39
+ </div>
40
+ <div class="recipe-card">
41
+ <h3>Caching Strategies</h3>
42
+ <p>Implement caching to reduce redundant computations</p>
43
+ <div class="recipe-status">Coming Soon</div>
44
+ </div>
45
+ <div class="recipe-card">
46
+ <h3>Batch Processing</h3>
47
+ <p>Optimize throughput with batch processing techniques</p>
48
+ <div class="recipe-status">Coming Soon</div>
49
+ </div>
50
+ </div>
51
+ </section>
52
+ </main>
53
+ </body>
54
+ </html>
style.css CHANGED
@@ -1,28 +1,409 @@
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
8
+
9
  body {
10
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
11
+ background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
12
+ color: white;
13
+ min-height: 100vh;
14
+ font-weight: 400;
15
+ line-height: 1.6;
16
+ }
17
+
18
+ .navbar {
19
+ background-color: transparent;
20
+ padding: 3rem 0 2rem 0;
21
+ position: relative;
22
+ }
23
+
24
+ .navbar::after {
25
+ content: '';
26
+ position: absolute;
27
+ bottom: 0;
28
+ left: 50%;
29
+ transform: translateX(-50%);
30
+ width: 100px;
31
+ height: 1px;
32
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
33
+ }
34
+
35
+ .nav-content {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ padding: 0 2rem;
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ }
43
+
44
+ .nav-title {
45
+ font-size: 2.5rem;
46
+ font-weight: 700;
47
+ color: white;
48
+ margin: 0;
49
+ letter-spacing: -0.02em;
50
+ text-shadow: 0 2px 4px rgba(0,0,0,0.3);
51
+ }
52
+
53
+ .nav-subtitle {
54
+ font-size: 1.1rem;
55
+ color: #b0b0b0;
56
+ font-weight: 300;
57
+ font-style: italic;
58
+ margin: 0;
59
+ opacity: 0.9;
60
+ }
61
+
62
+ .main-content {
63
+ max-width: 1200px;
64
+ margin: 0 auto;
65
+ padding: 4rem 2rem;
66
+ }
67
+
68
+ .section-title {
69
+ font-size: 2.2rem;
70
+ font-weight: 600;
71
+ margin-bottom: 3rem;
72
+ color: white;
73
+ letter-spacing: -0.01em;
74
+ text-align: center;
75
+ position: relative;
76
+ }
77
+
78
+ .section-title::after {
79
+ content: '';
80
+ position: absolute;
81
+ bottom: -1rem;
82
+ left: 50%;
83
+ transform: translateX(-50%);
84
+ width: 60px;
85
+ height: 2px;
86
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
87
+ }
88
+
89
+
90
+ .recipes-overview {
91
+ margin-top: 4rem;
92
+ }
93
+
94
+ .recipes-table {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 2rem;
98
+ max-width: 1200px;
99
+ margin: 0 auto;
100
+ }
101
+
102
+ .recipe-row {
103
+ display: grid;
104
+ grid-template-columns: 1fr 1fr;
105
+ gap: 2rem;
106
+ }
107
+
108
+ .recipe-cell {
109
+ background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
110
+ border: 1px solid rgba(255, 255, 255, 0.15);
111
+ border-radius: 20px;
112
+ padding: 2.5rem;
113
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
114
+ position: relative;
115
+ overflow: hidden;
116
+ backdrop-filter: blur(15px);
117
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
118
+ min-height: 250px;
119
+ }
120
+
121
+ .recipe-cell::before {
122
+ content: '';
123
+ position: absolute;
124
+ top: 0;
125
+ left: 0;
126
+ right: 0;
127
+ bottom: 0;
128
+ opacity: 0;
129
+ transition: opacity 0.3s ease;
130
+ }
131
+
132
+ .recipe-cell.audio {
133
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%);
134
+ }
135
+
136
+ .recipe-cell.video {
137
+ background: linear-gradient(135deg, rgba(255, 107, 157, 0.2) 0%, rgba(255, 142, 83, 0.15) 100%);
138
+ }
139
+
140
+ .recipe-cell.multimodal {
141
+ background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.15) 100%);
142
+ }
143
+
144
+ .recipe-cell.text {
145
+ background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.15) 100%);
146
+ }
147
+
148
+ .recipe-cell.guardrails {
149
+ background: linear-gradient(135deg, rgba(168, 237, 234, 0.2) 0%, rgba(254, 214, 227, 0.15) 100%);
150
+ }
151
+
152
+ .recipe-cell.optimization {
153
+ background: linear-gradient(135deg, rgba(255, 236, 210, 0.2) 0%, rgba(252, 182, 159, 0.15) 100%);
154
+ }
155
+
156
+ .recipe-cell.audio::before {
157
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
158
+ }
159
+
160
+ .recipe-cell.video::before {
161
+ background: linear-gradient(135deg, rgba(255, 107, 157, 0.1) 0%, rgba(255, 142, 83, 0.05) 100%);
162
  }
163
 
164
+ .recipe-cell.multimodal::before {
165
+ background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.05) 100%);
 
166
  }
167
 
168
+ .recipe-cell.text::before {
169
+ background: linear-gradient(135deg, rgba(67, 233, 123, 0.1) 0%, rgba(56, 249, 215, 0.05) 100%);
 
 
 
170
  }
171
 
172
+ .recipe-cell.guardrails::before {
173
+ background: linear-gradient(135deg, rgba(168, 237, 234, 0.1) 0%, rgba(254, 214, 227, 0.05) 100%);
174
+ }
175
+
176
+ .recipe-cell.optimization::before {
177
+ background: linear-gradient(135deg, rgba(255, 236, 210, 0.1) 0%, rgba(252, 182, 159, 0.05) 100%);
178
+ }
179
+
180
+ .recipe-cell:hover {
181
+ transform: translateY(-4px);
182
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
183
+ border-color: rgba(255, 255, 255, 0.25);
184
+ }
185
+
186
+ .recipe-cell:hover::before {
187
+ opacity: 1;
188
+ }
189
+
190
+ .recipe-cell h3 {
191
+ font-size: 1.5rem;
192
+ font-weight: 600;
193
+ margin-bottom: 1.5rem;
194
+ color: white;
195
+ letter-spacing: -0.01em;
196
+ z-index: 2;
197
+ position: relative;
198
+ }
199
+
200
+ .recipe-links {
201
+ display: flex;
202
+ flex-direction: column;
203
+ gap: 0.8rem;
204
+ z-index: 2;
205
+ position: relative;
206
+ }
207
+
208
+ .recipe-link {
209
+ color: #b0b0b0;
210
+ text-decoration: none;
211
+ font-size: 0.95rem;
212
+ font-weight: 500;
213
+ padding: 0.6rem 1rem;
214
+ border-radius: 8px;
215
+ border: 1px solid rgba(255, 255, 255, 0.1);
216
+ background: rgba(255, 255, 255, 0.05);
217
+ transition: all 0.2s ease;
218
+ display: block;
219
+ }
220
+
221
+ .recipe-link:hover {
222
+ color: white;
223
+ background: rgba(255, 255, 255, 0.1);
224
+ border-color: rgba(255, 255, 255, 0.2);
225
+ transform: translateX(4px);
226
+ }
227
+
228
+ .recipe-link.more-recipes {
229
+ background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
230
+ border: 1px solid rgba(255, 255, 255, 0.2);
231
+ font-weight: 600;
232
+ color: #d0d0d0;
233
+ margin-top: 0.5rem;
234
+ }
235
+
236
+ .recipe-link.more-recipes:hover {
237
+ background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.1) 100%);
238
+ border-color: rgba(255, 255, 255, 0.3);
239
+ color: white;
240
+ transform: translateX(6px);
241
+ }
242
+
243
+ .breadcrumb {
244
+ margin-bottom: 3rem;
245
+ }
246
+
247
+ .breadcrumb a {
248
+ color: #b0b0b0;
249
+ text-decoration: none;
250
+ font-size: 0.95rem;
251
+ font-weight: 500;
252
+ transition: all 0.2s ease;
253
+ padding: 0.5rem 1rem;
254
+ border-radius: 8px;
255
+ border: 1px solid rgba(255, 255, 255, 0.1);
256
+ background: rgba(255, 255, 255, 0.05);
257
+ }
258
+
259
+ .breadcrumb a:hover {
260
+ color: white;
261
+ background: rgba(255, 255, 255, 0.1);
262
+ border-color: rgba(255, 255, 255, 0.2);
263
+ transform: translateY(-1px);
264
+ }
265
+
266
+ .topic-header {
267
+ margin-bottom: 4rem;
268
+ text-align: center;
269
+ }
270
+
271
+ .topic-title {
272
+ font-size: 3.5rem;
273
+ font-weight: 700;
274
+ margin-bottom: 1.5rem;
275
+ color: white;
276
+ letter-spacing: -0.02em;
277
+ text-shadow: 0 2px 4px rgba(0,0,0,0.3);
278
+ }
279
+
280
+ .topic-description {
281
+ font-size: 1.3rem;
282
+ color: #b0b0b0;
283
+ max-width: 700px;
284
+ font-weight: 400;
285
  margin: 0 auto;
286
+ line-height: 1.6;
287
+ }
288
+
289
+ .recipes-section {
290
+ margin-top: 3rem;
291
+ }
292
+
293
+ .recipes-grid {
294
+ display: grid;
295
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
296
+ gap: 2rem;
297
+ max-width: 1200px;
298
+ margin: 0 auto;
299
+ }
300
+
301
+ .recipe-card {
302
+ background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
303
+ border: 1px solid rgba(255, 255, 255, 0.1);
304
  border-radius: 16px;
305
+ padding: 2rem;
306
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
307
+ position: relative;
308
+ overflow: hidden;
309
+ backdrop-filter: blur(10px);
310
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
311
+ }
312
+
313
+ .recipe-card::before {
314
+ content: '';
315
+ position: absolute;
316
+ top: 0;
317
+ left: 0;
318
+ right: 0;
319
+ bottom: 0;
320
+ background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
321
+ opacity: 0;
322
+ transition: opacity 0.3s ease;
323
+ }
324
+
325
+ .recipe-card:hover {
326
+ transform: translateY(-4px);
327
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
328
+ border-color: rgba(255, 255, 255, 0.2);
329
+ }
330
+
331
+ .recipe-card:hover::before {
332
+ opacity: 1;
333
+ }
334
+
335
+ .recipe-card h3 {
336
+ font-size: 1.4rem;
337
+ font-weight: 600;
338
+ margin-bottom: 1rem;
339
+ color: white;
340
+ letter-spacing: -0.01em;
341
+ z-index: 2;
342
+ position: relative;
343
+ }
344
+
345
+ .recipe-card p {
346
+ color: #b0b0b0;
347
+ font-size: 1rem;
348
+ line-height: 1.6;
349
+ margin-bottom: 1.5rem;
350
+ z-index: 2;
351
+ position: relative;
352
+ }
353
+
354
+ .recipe-status {
355
+ display: inline-block;
356
+ background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
357
+ color: #b0b0b0;
358
+ padding: 0.4rem 1rem;
359
+ border-radius: 20px;
360
+ font-size: 0.85rem;
361
+ font-weight: 500;
362
+ border: 1px solid rgba(255, 255, 255, 0.1);
363
+ z-index: 2;
364
+ position: relative;
365
  }
366
 
367
+ @media (max-width: 768px) {
368
+ .nav-content {
369
+ flex-direction: column;
370
+ gap: 1rem;
371
+ text-align: center;
372
+ }
373
+
374
+ .nav-title {
375
+ font-size: 2.2rem;
376
+ }
377
+
378
+ .nav-subtitle {
379
+ font-size: 1rem;
380
+ }
381
+
382
+ .main-content {
383
+ padding: 2rem 1rem;
384
+ }
385
+
386
+
387
+ .topic-title {
388
+ font-size: 2.5rem;
389
+ }
390
+
391
+ .recipes-grid {
392
+ grid-template-columns: 1fr;
393
+ gap: 1.5rem;
394
+ }
395
+
396
+ .recipe-card {
397
+ padding: 1.5rem;
398
+ }
399
+
400
+ .recipe-row {
401
+ grid-template-columns: 1fr;
402
+ gap: 1.5rem;
403
+ }
404
+
405
+ .recipe-cell {
406
+ padding: 1.5rem;
407
+ min-height: auto;
408
+ }
409
  }
text.html ADDED
@@ -0,0 +1,54 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Text - ClosedToOpen</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
+ <body>
10
+ <nav class="navbar">
11
+ <div class="nav-content">
12
+ <h1 class="nav-title">ClosedToOpen</h1>
13
+ <p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
14
+ </div>
15
+ </nav>
16
+
17
+ <main class="main-content">
18
+ <div class="breadcrumb">
19
+ <a href="index.html">← Back to Topics</a>
20
+ </div>
21
+
22
+ <section class="topic-header">
23
+ <h1 class="topic-title">Text</h1>
24
+ <p class="topic-description">Replace GPT models with open-source alternatives for text generation and understanding</p>
25
+ </section>
26
+
27
+ <section class="recipes-section">
28
+ <h2 class="section-title">Recipes</h2>
29
+ <div class="recipes-grid">
30
+ <div class="recipe-card">
31
+ <h3>GPT-4 → Llama 3</h3>
32
+ <p>Replace GPT-4 with Llama 3 for general text tasks</p>
33
+ <div class="recipe-status">Coming Soon</div>
34
+ </div>
35
+ <div class="recipe-card">
36
+ <h3>GPT-3.5 → Mistral</h3>
37
+ <p>Use Mistral models for faster, cheaper text generation</p>
38
+ <div class="recipe-status">Coming Soon</div>
39
+ </div>
40
+ <div class="recipe-card">
41
+ <h3>Embeddings → Sentence Transformers</h3>
42
+ <p>Replace OpenAI embeddings with Sentence Transformers</p>
43
+ <div class="recipe-status">Coming Soon</div>
44
+ </div>
45
+ <div class="recipe-card">
46
+ <h3>Fine-tuning → LoRA</h3>
47
+ <p>Fine-tune models efficiently using LoRA techniques</p>
48
+ <div class="recipe-status">Coming Soon</div>
49
+ </div>
50
+ </div>
51
+ </section>
52
+ </main>
53
+ </body>
54
+ </html>
video.html ADDED
@@ -0,0 +1,54 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Video - ClosedToOpen</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
+ <body>
10
+ <nav class="navbar">
11
+ <div class="nav-content">
12
+ <h1 class="nav-title">ClosedToOpen</h1>
13
+ <p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
14
+ </div>
15
+ </nav>
16
+
17
+ <main class="main-content">
18
+ <div class="breadcrumb">
19
+ <a href="index.html">← Back to Migration Guides</a>
20
+ </div>
21
+
22
+ <section class="topic-header">
23
+ <h1 class="topic-title">Video</h1>
24
+ <p class="topic-description">Process and generate video content with open-source models instead of proprietary APIs</p>
25
+ </section>
26
+
27
+ <section class="recipes-section">
28
+ <h2 class="section-title">Recipes</h2>
29
+ <div class="recipes-grid">
30
+ <div class="recipe-card">
31
+ <h3>Video Understanding → Video-LLaMA</h3>
32
+ <p>Analyze video content using Video-LLaMA instead of proprietary video APIs</p>
33
+ <div class="recipe-status">Coming Soon</div>
34
+ </div>
35
+ <div class="recipe-card">
36
+ <h3>Video Generation → Stable Video Diffusion</h3>
37
+ <p>Generate videos using Stable Video Diffusion instead of proprietary services</p>
38
+ <div class="recipe-status">Coming Soon</div>
39
+ </div>
40
+ <div class="recipe-card">
41
+ <h3>Video-to-Text</h3>
42
+ <p>Extract text and captions from video content using open models</p>
43
+ <div class="recipe-status">Coming Soon</div>
44
+ </div>
45
+ <div class="recipe-card">
46
+ <h3>Video Editing</h3>
47
+ <p>Automated video editing and processing with open-source tools</p>
48
+ <div class="recipe-status">Coming Soon</div>
49
+ </div>
50
+ </div>
51
+ </section>
52
+ </main>
53
+ </body>
54
+ </html>