Skip to content

Commit 2526388

Browse files
jxtngxjxtngx
committed
update apps with gh pages deployment
1 parent b9f696e commit 2526388

File tree

5 files changed

+485
-0
lines changed

5 files changed

+485
-0
lines changed

‎.github/workflows/deploy-pages.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: "pages"
15+
cancel-in-progress: false
16+
17+
jobs:
18+
deploy:
19+
environment:
20+
name: github-pages
21+
url: ${{ steps.deployment.outputs.page_url }}
22+
runs-on: ubuntu-latest
23+
steps:
24+
- name: Checkout
25+
uses: actions/checkout@v4
26+
27+
- name: Setup Pages
28+
uses: actions/configure-pages@v4
29+
30+
- name: Upload artifact
31+
uses: actions/upload-pages-artifact@v3
32+
with:
33+
path: ./apps
34+
35+
- name: Deploy to GitHub Pages
36+
id: deployment
37+
uses: actions/deploy-pages@v4

‎apps/index.html‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
<!DOCTYPE html>
2+
<!-- Copyright 2025 jxtngx | Apache 2.0 License | https://github.com/jxtngx/claude-code-pytorch -->
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Claude Code PyTorch - Example Applications</title>
8+
<link rel="stylesheet" href="global.css">
9+
<style>
10+
body {
11+
min-height: 100vh;
12+
padding: var(--space-8);
13+
display: flex;
14+
flex-direction: column;
15+
}
16+
17+
.container {
18+
max-width: 1200px;
19+
margin: 0 auto;
20+
width: 100%;
21+
flex: 1;
22+
}
23+
24+
.header {
25+
text-align: center;
26+
margin-bottom: var(--space-12);
27+
}
28+
29+
.header h1 {
30+
font-size: var(--text-5xl);
31+
font-weight: var(--font-bold);
32+
background: var(--gradient-primary);
33+
-webkit-background-clip: text;
34+
-webkit-text-fill-color: transparent;
35+
margin-bottom: var(--space-4);
36+
}
37+
38+
.header p {
39+
font-size: var(--text-lg);
40+
color: var(--muted-foreground);
41+
max-width: 800px;
42+
margin: 0 auto var(--space-3);
43+
line-height: 1.6;
44+
}
45+
46+
.notice {
47+
background: var(--warning-muted);
48+
border: 1px solid var(--warning);
49+
border-radius: var(--radius-lg);
50+
padding: var(--space-4);
51+
margin-bottom: var(--space-10);
52+
text-align: center;
53+
}
54+
55+
.notice p {
56+
color: var(--warning);
57+
font-size: var(--text-sm);
58+
font-weight: var(--font-medium);
59+
}
60+
61+
.notice code {
62+
background: var(--neutral-800);
63+
padding: var(--space-1) var(--space-2);
64+
border-radius: var(--radius-sm);
65+
font-family: var(--font-mono);
66+
font-size: var(--text-sm);
67+
}
68+
69+
.cards-grid {
70+
display: grid;
71+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
72+
gap: var(--space-8);
73+
margin-bottom: var(--space-12);
74+
}
75+
76+
.app-card {
77+
background: var(--card);
78+
border: 1px solid var(--border);
79+
border-radius: var(--radius-xl);
80+
overflow: hidden;
81+
transition: all var(--transition-base) var(--ease-in-out);
82+
position: relative;
83+
display: flex;
84+
flex-direction: column;
85+
}
86+
87+
.app-card:hover {
88+
transform: translateY(-4px);
89+
box-shadow: var(--shadow-2xl);
90+
border-color: var(--ring);
91+
}
92+
93+
.card-header {
94+
background: var(--gradient-primary);
95+
padding: var(--space-6);
96+
position: relative;
97+
overflow: hidden;
98+
}
99+
100+
.card-header::after {
101+
content: '';
102+
position: absolute;
103+
top: 0;
104+
left: 0;
105+
right: 0;
106+
bottom: 0;
107+
background: linear-gradient(135deg, transparent, rgba(255,255,255,0.05));
108+
pointer-events: none;
109+
}
110+
111+
.card-icon {
112+
width: 48px;
113+
height: 48px;
114+
margin-bottom: var(--space-3);
115+
opacity: 0.9;
116+
}
117+
118+
.card-title {
119+
font-size: var(--text-2xl);
120+
font-weight: var(--font-bold);
121+
color: var(--foreground);
122+
margin-bottom: var(--space-2);
123+
}
124+
125+
.card-category {
126+
font-size: var(--text-sm);
127+
color: var(--muted-foreground);
128+
text-transform: uppercase;
129+
letter-spacing: 1px;
130+
opacity: 0.8;
131+
}
132+
133+
.card-content {
134+
padding: var(--space-6);
135+
flex: 1;
136+
display: flex;
137+
flex-direction: column;
138+
}
139+
140+
.card-description {
141+
color: var(--muted-foreground);
142+
font-size: var(--text-base);
143+
line-height: 1.6;
144+
margin-bottom: var(--space-6);
145+
flex: 1;
146+
}
147+
148+
.card-features {
149+
list-style: none;
150+
margin-bottom: var(--space-6);
151+
}
152+
153+
.card-features li {
154+
color: var(--muted-foreground);
155+
font-size: var(--text-sm);
156+
padding: var(--space-2) 0;
157+
display: flex;
158+
align-items: center;
159+
gap: var(--space-2);
160+
}
161+
162+
.card-features li::before {
163+
content: '✓';
164+
color: var(--success);
165+
font-weight: var(--font-bold);
166+
}
167+
168+
.card-action {
169+
display: inline-block;
170+
background: var(--gradient-success);
171+
color: var(--foreground);
172+
text-decoration: none;
173+
padding: var(--space-3) var(--space-6);
174+
border-radius: var(--radius-lg);
175+
font-weight: var(--font-semibold);
176+
text-align: center;
177+
transition: all var(--transition-base) var(--ease-in-out);
178+
}
179+
180+
.card-action:hover {
181+
opacity: 0.9;
182+
transform: translateX(4px);
183+
}
184+
185+
.footer {
186+
margin-top: auto;
187+
padding-top: var(--space-12);
188+
border-top: 1px solid var(--border);
189+
text-align: center;
190+
}
191+
192+
.footer h3 {
193+
color: var(--foreground);
194+
font-size: var(--text-xl);
195+
margin-bottom: var(--space-4);
196+
}
197+
198+
.footer p {
199+
color: var(--muted-foreground);
200+
font-size: var(--text-sm);
201+
line-height: 1.6;
202+
max-width: 800px;
203+
margin: 0 auto var(--space-3);
204+
}
205+
206+
.footer code {
207+
background: var(--muted);
208+
padding: var(--space-1) var(--space-2);
209+
border-radius: var(--radius-sm);
210+
font-family: var(--font-mono);
211+
color: var(--accent-foreground);
212+
}
213+
214+
@media (max-width: 768px) {
215+
body {
216+
padding: var(--space-4);
217+
}
218+
219+
.header h1 {
220+
font-size: var(--text-3xl);
221+
}
222+
223+
.cards-grid {
224+
grid-template-columns: 1fr;
225+
gap: var(--space-6);
226+
}
227+
228+
.app-card {
229+
max-width: 100%;
230+
}
231+
}
232+
</style>
233+
</head>
234+
<body>
235+
<div class="container">
236+
<header class="header">
237+
<h1>Claude Code PyTorch Examples</h1>
238+
<p>
239+
Interactive web applications demonstrating PyTorch model deployment capabilities.
240+
These examples showcase different AI tasks and can be customized for your specific needs.
241+
</p>
242+
</header>
243+
244+
<div class="notice">
245+
<p>
246+
These are example implementations. For production use, customize with
247+
<code>agent-InterfaceDesigner</code> to match your requirements.
248+
</p>
249+
</div>
250+
251+
<main class="cards-grid">
252+
<!-- Image Classification Card -->
253+
<article class="app-card">
254+
<div class="card-header">
255+
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
256+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
257+
<circle cx="8.5" cy="8.5" r="1.5"></circle>
258+
<polyline points="21 15 16 10 5 21"></polyline>
259+
</svg>
260+
<h2 class="card-title">Image Classification</h2>
261+
<p class="card-category">Computer Vision</p>
262+
</div>
263+
<div class="card-content">
264+
<p class="card-description">
265+
Upload images and get instant classification results using deep learning models.
266+
Supports multiple image formats with real-time predictions and confidence scores.
267+
</p>
268+
<ul class="card-features">
269+
<li>Drag-and-drop image upload</li>
270+
<li>Real-time classification</li>
271+
<li>Confidence score visualization</li>
272+
<li>Multiple format support</li>
273+
</ul>
274+
<a href="vision/imageclassification.html" class="card-action">
275+
Launch Demo →
276+
</a>
277+
</div>
278+
</article>
279+
280+
<!-- Text Classification Card -->
281+
<article class="app-card">
282+
<div class="card-header">
283+
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
284+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
285+
<polyline points="14 2 14 8 20 8"></polyline>
286+
<line x1="16" y1="13" x2="8" y2="13"></line>
287+
<line x1="16" y1="17" x2="8" y2="17"></line>
288+
<polyline points="10 9 9 9 8 9"></polyline>
289+
</svg>
290+
<h2 class="card-title">Text Classification</h2>
291+
<p class="card-category">Natural Language Processing</p>
292+
</div>
293+
<div class="card-content">
294+
<p class="card-description">
295+
Analyze and classify text using advanced NLP models. Support for single text,
296+
batch processing, and file uploads with detailed sentiment and category analysis.
297+
</p>
298+
<ul class="card-features">
299+
<li>Single and batch text processing</li>
300+
<li>File upload support</li>
301+
<li>Multi-label classification</li>
302+
<li>Sentiment analysis</li>
303+
</ul>
304+
<a href="text/textclassification.html" class="card-action">
305+
Launch Demo →
306+
</a>
307+
</div>
308+
</article>
309+
310+
<!-- Vision-Language Card -->
311+
<article class="app-card">
312+
<div class="card-header">
313+
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
314+
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
315+
<circle cx="12" cy="12" r="3"></circle>
316+
<path d="M21 16v-2a4 4 0 0 0-4-4H5.5"></path>
317+
<polyline points="18 18 21 16 18 14"></polyline>
318+
</svg>
319+
<h2 class="card-title">Vision-Language Understanding</h2>
320+
<p class="card-category">Multimodal AI</p>
321+
</div>
322+
<div class="card-content">
323+
<p class="card-description">
324+
Combine vision and language understanding for advanced AI tasks. Generate captions,
325+
answer questions about images, and perform visual reasoning.
326+
</p>
327+
<ul class="card-features">
328+
<li>Image captioning</li>
329+
<li>Visual question answering</li>
330+
<li>Image-text similarity</li>
331+
<li>Visual reasoning tasks</li>
332+
</ul>
333+
<a href="multimodal/vision-language.html" class="card-action">
334+
Launch Demo →
335+
</a>
336+
</div>
337+
</article>
338+
</main>
339+
340+
<footer class="footer">
341+
<h3>Customization with Claude Code Agents</h3>
342+
<p>
343+
These examples are designed to be customized for your specific use case.
344+
Use <code>agent-InterfaceDesigner</code> to modify the UI, integrate with your backend,
345+
and add domain-specific features.
346+
</p>
347+
<p>
348+
Work with <code>agent-CloudEngineer</code> for API integration,
349+
<code>agent-ModelArchitect</code> for model selection, and
350+
<code>agent-MetricsArchitect</code> for custom evaluation metrics.
351+
</p>
352+
<p style="margin-top: var(--space-6); opacity: 0.6;">
353+
Built with Claude Code PyTorch Template
354+
</p>
355+
</footer>
356+
</div>
357+
</body>
358+
</html>

0 commit comments

Comments
 (0)