Hugging Face's logo

Spaces:
HuggingFaceM4
/
FineVision
Running

App Files Community
2
thibaud frere commited on
Commit
400357a
Β·
1 Parent(s): 7a825d5

test astro

Browse files
Files changed (25) hide show
  1. ASTRO_MIGRATION.md +272 -0
  2. app/.astro/types.d.ts +1 -0
  3. app/astro.config.mjs +7 -0
  4. app/package-lock.json +0 -0
  5. app/package.json +0 -0
  6. app/src/env.d.ts +1 -0
  7. app/src/pages/index.astro +18 -0
  8. nginx.conf +12 -0
  9. {app β†’ old}/.gitignore +0 -0
  10. {app β†’ old}/README.md +0 -0
  11. {app β†’ old}/assets/images/banner.png +0 -0
  12. {app β†’ old}/assets/test.txt +0 -0
  13. old/package.json +0 -0
  14. {app β†’ old}/src/bibliography.bib +0 -0
  15. {app β†’ old}/src/colors.mjs +0 -0
  16. {app β†’ old}/src/distill.js +0 -0
  17. {app β†’ old}/src/fine_tasks.js +0 -0
  18. {app β†’ old}/src/index.html +0 -0
  19. {app β†’ old}/src/index.js +0 -0
  20. {app β†’ old}/src/leaderboard_results.js +0 -0
  21. {app β†’ old}/src/plot_task.js +0 -0
  22. {app β†’ old}/src/stats.js +0 -0
  23. {app β†’ old}/src/style.css +0 -0
  24. {app β†’ old}/webpack.config.js +0 -0
  25. {app β†’ old}/yarn.lock +0 -0
ASTRO_MIGRATION.md ADDED
@@ -0,0 +1,272 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ## Migration vers Astro (Markdown/MDX) – SpΓ©cification et guide
2
+
3
+ ### Objectif
4
+ - Remplacer le template Distill par une pile moderne basΓ©e sur Markdown/MDX avec Astro, tout en conservant: front‑matter, maths, code, citations/bibliographie, table des matiΓ¨res, figures, sections de contenu, et composants interactifs (plots/tables).
5
+ - Offrir une optimisation d’images de premier ordre (AVIF/WebP, `srcset`, lazy‑loading) et un dΓ©ploiement statique via Nginx.
6
+
7
+ ### Stack cible
8
+ - Astro 4+ (SSG, sortie statique `dist/`)
9
+ - Markdown/MDX (contenu principal)
10
+ - IntΓ©grations/Plugins:
11
+ - `@astrojs/mdx` (MDX)
12
+ - `remark-math` + `rehype-katex` (maths)
13
+ - `rehype-slug` + `rehype-autolink-headings` (ancres H2/H3/H4)
14
+ - `remark-toc` (table des matières auto)
15
+ - `rehype-citation` (citations/bibliographie depuis BibTeX/CSL)
16
+ - `@astrojs/image` avec `SquooshImageService` (optimisation d’images sans dΓ©pendances natives)
17
+ - Surlignage code: Shiki par dΓ©faut d’Astro (fences ```lang)
18
+
19
+ ### Mapping Distill β†’ Astro
20
+ - `d-front-matter` β†’ YAML front‑matter en tΓͺte de fichier `.md/.mdx` (titre, auteurs, dates, cover/hero, tags…)
21
+ - `d-title` β†’ en‑tΓͺte de page dans un layout Astro (`src/layouts/BlogLayout.astro`) utilisant les mΓ©tadonnΓ©es
22
+ - `d-byline` β†’ bloc auteurs/affiliations dans le layout
23
+ - `d-article` β†’ contenu Markdown principal
24
+ - `d-figure` β†’ `<Image />` Astro (optimisΓ©) + `<figure>/<figcaption>` sΓ©mantique
25
+ - `d-toc` β†’ `remark-toc` + `rehype-slug/autolink` (TOC ancrΓ©)
26
+ - `d-footnote`/`d-footnote-list` β†’ notes de bas de page Markdown standard
27
+ - `d-math` β†’ Math Markdown via `remark-math`/`rehype-katex` (`$...$`, `$$...$$`)
28
+ - `d-code` (Prism) β†’ fences Markdown + Shiki
29
+ - `d-cite`/`d-bibliography` β†’ `rehype-citation` (gΓ©nΓ©ration des rΓ©fΓ©rences + liens), section `## References` en bas
30
+
31
+ ### Arborescence proposΓ©e
32
+ ```
33
+ astro-site/
34
+ src/
35
+ assets/ # images sources (ex: banner.png)
36
+ content/
37
+ bibliography.bib
38
+ posts/
39
+ finetasks.mdx # migration de index.html β†’ Markdown/MDX
40
+ components/
41
+ TOC.astro # (optionnel) wrapper visuel autour du TOC
42
+ PlotlyChart.jsx # composant interactif (client:visible)
43
+ layouts/
44
+ BlogLayout.astro
45
+ public/ # assets statiques bruts si besoin
46
+ astro.config.mjs
47
+ package.json
48
+ ```
49
+
50
+ ### Configuration Astro (plugins)
51
+ ```js
52
+ // astro.config.mjs
53
+ import { defineConfig } from 'astro/config';
54
+ import mdx from '@astrojs/mdx';
55
+ import image from '@astrojs/image';
56
+ import { SquooshImageService } from '@astrojs/image/squoosh';
57
+
58
+ // Remark/Rehype
59
+ import remarkMath from 'remark-math';
60
+ import remarkToc from 'remark-toc';
61
+ import rehypeKatex from 'rehype-katex';
62
+ import rehypeSlug from 'rehype-slug';
63
+ import rehypeAutolinkHeadings from 'rehype-autolink-headings';
64
+ import rehypeCitation from 'rehype-citation';
65
+
66
+ export default defineConfig({
67
+ integrations: [
68
+ mdx(),
69
+ image({ serviceEntryPoint: SquooshImageService() })
70
+ ],
71
+ markdown: {
72
+ remarkPlugins: [
73
+ [remarkToc, { heading: 'Table of contents', maxDepth: 3 }],
74
+ remarkMath,
75
+ ],
76
+ rehypePlugins: [
77
+ rehypeSlug,
78
+ [rehypeAutolinkHeadings, { behavior: 'wrap' }],
79
+ rehypeKatex,
80
+ // Génère les citations et la biblio (insertion en bas si "## References" existe)
81
+ [rehypeCitation, {
82
+ bibliography: 'src/content/bibliography.bib',
83
+ linkCitations: true,
84
+ // CSL optionnel: csl: 'src/content/ieee.csl'
85
+ }],
86
+ ],
87
+ shikiConfig: { theme: 'github-dark' },
88
+ },
89
+ build: {
90
+ assets: 'assets',
91
+ },
92
+ output: 'static'
93
+ });
94
+ ```
95
+
96
+ Ajouter les styles KaTeX (dans `src/layouts/BlogLayout.astro` ou global CSS):
97
+ ```html
98
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" crossorigin="anonymous" />
99
+ ```
100
+
101
+ ### Layout principal
102
+ ```astro
103
+ ---
104
+ // src/layouts/BlogLayout.astro
105
+ const { title, description, authors = [], published, hero } = Astro.props;
106
+ ---
107
+ <html lang="en">
108
+ <head>
109
+ <meta charset="utf-8" />
110
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
111
+ <title>{title}</title>
112
+ <meta name="description" content={description} />
113
+ </head>
114
+ <body>
115
+ <header class="page-hero">
116
+ {hero && <img src={hero} alt={title} loading="eager" fetchpriority="high" />}
117
+ <h1>{title}</h1>
118
+ {published && <p class="byline">{published}</p>}
119
+ {authors.length > 0 && (
120
+ <p class="authors">{authors.map(a => a.name || a).join(', ')}</p>
121
+ )}
122
+ </header>
123
+ <main>
124
+ <slot />
125
+ </main>
126
+ </body>
127
+ <style>
128
+ .page-hero img{width:100%;height:auto;}
129
+ main{max-width:980px;margin:0 auto;padding:24px}
130
+ </style>
131
+ </html>
132
+ ```
133
+
134
+ ### Exemple de page MDX (migration de `index.html`)
135
+ ```mdx
136
+ ---
137
+ layout: ../layouts/BlogLayout.astro
138
+ title: "Scaling FineWeb to 1000+ languages: Step 1: finding signal in 100s of evaluation tasks"
139
+ description: "Multilingual evaluation & FineTasks"
140
+ published: "Oct 23, 2024"
141
+ authors:
142
+ - name: "Hynek Kydlíček"
143
+ - name: "Guilherme Penedo"
144
+ - name: "ClΓ©mentine Fourier"
145
+ - name: "Nathan Habib"
146
+ - name: "Thomas Wolf"
147
+ hero: "../assets/images/banner.png"
148
+ ---
149
+
150
+ ## Table of contents
151
+
152
+ <!-- Le TOC sera injectΓ© ici par remark-toc -->
153
+
154
+ ![FineTasks](../assets/images/banner.png)
155
+
156
+ Du texte… Γ©quations $e^{i\pi}+1=0$ et un bloc:
157
+
158
+ $$
159
+ \int_a^b f(x)\,dx
160
+ $$
161
+
162
+ Citation: [@kydlicek2024finetasksmultilingualtasks].
163
+
164
+ ## Results
165
+
166
+ <PlotlyChart client:visible dataUrl="/data/..." />
167
+
168
+ ## References
169
+ ```
170
+
171
+ ### Composants interactifs (exemples)
172
+ - Plotly (client‑side, hydratΓ© quand visible):
173
+ ```jsx
174
+ // src/components/PlotlyChart.jsx
175
+ import { useEffect, useRef } from 'react';
176
+ import Plotly from 'plotly.js-basic-dist-min';
177
+
178
+ export default function PlotlyChart({ data, layout, config }) {
179
+ const ref = useRef(null);
180
+ useEffect(() => {
181
+ if (!ref.current) return;
182
+ Plotly.newPlot(ref.current, data || [], layout || {}, config || {responsive:true});
183
+ return () => { Plotly.purge(ref.current); };
184
+ }, [data, layout, config]);
185
+ return <div ref={ref} style={{width:'100%'}} />;
186
+ }
187
+ ```
188
+
189
+ - DataTables: prΓ©fΓ©rer gΓ©nΓ©rer des tables Markdown; pour un tableau interactif, crΓ©er un composant MDX dΓ©diΓ© et l’hydrater `client:visible`.
190
+
191
+ ### Optimisation d’images (Astro)
192
+ - Utiliser `@astrojs/image` (Squoosh) ou `astro:assets` pour images locales.
193
+ - Exemple responsive (MDX):
194
+ ```astro
195
+ ---
196
+ import { Image } from '@astrojs/image/components';
197
+ import banner from '../assets/images/banner.png';
198
+ ---
199
+ <Image src={banner} alt="FineTasks" widths={[480,768,1080,1440]} formats={["avif","webp","png"]} sizes="(max-width: 768px) 100vw, 980px" loading="lazy" decoding="async" />
200
+ ```
201
+ - Bonnes pratiques: dimensions explicites `width/height` (automatiques avec `Image`), `loading="lazy"` hors hero, `fetchpriority="high"` sur le hero.
202
+
203
+ ### Citations et bibliographie
204
+ - Placer `src/content/bibliography.bib` (copie de `app/src/bibliography.bib`).
205
+ - Citer en Markdown: `[@clé]` ou `[-@clé]`. Ajouter `## References` à la fin; `rehype-citation` génère la bibliographie.
206
+
207
+ ### Commandes/installation
208
+ ```bash
209
+ npm create astro@latest astro-site -- --template minimal
210
+ cd astro-site
211
+ npm i -D @astrojs/mdx @astrojs/image remark-math rehype-katex rehype-slug rehype-autolink-headings remark-toc rehype-citation
212
+ npm run dev
213
+ # build
214
+ npm run build
215
+ ```
216
+
217
+ ### Dockerfile (multi‑stage)
218
+ ```Dockerfile
219
+ FROM node:20 AS build
220
+ WORKDIR /site
221
+ COPY astro-site/package*.json ./
222
+ RUN npm ci
223
+ COPY astro-site/ .
224
+ RUN npm run build
225
+
226
+ FROM nginx:alpine
227
+ COPY --from=build /site/dist /usr/share/nginx/html
228
+ COPY nginx.conf /etc/nginx/nginx.conf
229
+ EXPOSE 8080
230
+ CMD ["nginx","-g","daemon off;"]
231
+ ```
232
+
233
+ ### Nginx (statique, cache + SPA fallback)
234
+ ```nginx
235
+ worker_processes auto;
236
+ events { worker_connections 1024; }
237
+ http {
238
+ include /etc/nginx/mime.types;
239
+ server {
240
+ listen 8080;
241
+ server_name localhost;
242
+ root /usr/share/nginx/html;
243
+ index index.html;
244
+
245
+ location /assets/ {
246
+ expires 30d;
247
+ add_header Cache-Control "public, max-age=2592000, immutable";
248
+ }
249
+ location / {
250
+ try_files $uri $uri/ /index.html;
251
+ }
252
+ location = /health { return 200 "ok"; add_header Content-Type text/plain; }
253
+ }
254
+ }
255
+ ```
256
+
257
+ ### Γ‰tapes de migration depuis ce dΓ©pΓ΄t
258
+ 1) CrΓ©er `astro-site/` et installer la stack (ci‑dessus).
259
+ 2) Copier `app/src/bibliography.bib` β†’ `astro-site/src/content/bibliography.bib`.
260
+ 3) Copier les images `app/assets/images/*` β†’ `astro-site/src/assets/images/*`.
261
+ 4) Convertir `app/src/index.html` β†’ `astro-site/src/content/posts/finetasks.mdx` (reprendre sections H2/H3/H4, figures, Γ©quations, et remplacer les blocs Distill par Markdown/MDX).
262
+ 5) RecrΓ©er les applets (plots/tables) via composants MDX (`PlotlyChart.jsx`, etc.).
263
+ 6) Ajuster le layout (`BlogLayout.astro`) pour le titre, auteurs, date, hero.
264
+ 7) Ajouter TOC, maths, citations (plugins configurΓ©s).
265
+ 8) VΓ©rifier le build (`npm run build`) et brancher le Docker/Nginx proposΓ©s.
266
+
267
+ ### Notes
268
+ - Pour Γ©viter des dΓ©pendances natives (Sharp) en build Docker, on force le service image Squoosh (WASM).
269
+ - Si besoin de SEO/sitemap/RSS, ajouter `@astrojs/sitemap`/`@astrojs/rss`.
270
+ - Les composants interactifs doivent Γͺtre idempotents et hydratΓ©s avec `client:visible`/`client:idle`.
271
+
272
+
app/.astro/types.d.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ /// <reference types="astro/client" />
app/astro.config.mjs ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ import { defineConfig } from 'astro/config';
2
+
3
+ export default defineConfig({
4
+ output: 'static'
5
+ });
6
+
7
+
app/package-lock.json ADDED
Binary file (203 kB). View file
 
app/package.json CHANGED
Binary files a/app/package.json and b/app/package.json differ
 
app/src/env.d.ts ADDED
@@ -0,0 +1 @@
 
 
1
+ /// <reference path="../.astro/types.d.ts" />
app/src/pages/index.astro ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ const title = 'Hello Astro on HF Spaces';
3
+ ---
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="utf-8" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+ <title>{title}</title>
9
+ </head>
10
+ <body>
11
+ <main style="max-width: 720px; margin: 40px auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji;">
12
+ <h1 style="margin:0 0 16px;">πŸš€ Hello World</h1>
13
+ <p>Astro est dΓ©ployΓ© statiquement via Nginx sur le port 8080.</p>
14
+ </main>
15
+ </body>
16
+ </html>
17
+
18
+
nginx.conf CHANGED
@@ -24,6 +24,18 @@ http {
24
  root /usr/share/nginx/html;
25
  index index.html;
26
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  location / {
28
  try_files $uri $uri/ /index.html;
29
  }
 
24
  root /usr/share/nginx/html;
25
  index index.html;
26
 
27
+ # Health check endpoint
28
+ location = /health {
29
+ return 200 "ok";
30
+ add_header Content-Type text/plain;
31
+ }
32
+
33
+ # Cache immutable build assets from Astro
34
+ location /_astro/ {
35
+ expires 30d;
36
+ add_header Cache-Control "public, max-age=2592000, immutable";
37
+ }
38
+
39
  location / {
40
  try_files $uri $uri/ /index.html;
41
  }
{app β†’ old}/.gitignore RENAMED
File without changes
{app β†’ old}/README.md RENAMED
File without changes
{app β†’ old}/assets/images/banner.png RENAMED
File without changes
{app β†’ old}/assets/test.txt RENAMED
File without changes
old/package.json ADDED
Binary file (1.02 kB). View file
 
{app β†’ old}/src/bibliography.bib RENAMED
File without changes
{app β†’ old}/src/colors.mjs RENAMED
File without changes
{app β†’ old}/src/distill.js RENAMED
File without changes
{app β†’ old}/src/fine_tasks.js RENAMED
File without changes
{app β†’ old}/src/index.html RENAMED
File without changes
{app β†’ old}/src/index.js RENAMED
File without changes
{app β†’ old}/src/leaderboard_results.js RENAMED
File without changes
{app β†’ old}/src/plot_task.js RENAMED
File without changes
{app β†’ old}/src/stats.js RENAMED
File without changes
{app β†’ old}/src/style.css RENAMED
File without changes
{app β†’ old}/webpack.config.js RENAMED
File without changes
{app β†’ old}/yarn.lock RENAMED
File without changes