| import fs from 'node:fs'; |
| import path from 'node:path'; |
|
|
| const root = process.cwd(); |
| const dist = path.join(root, 'dist'); |
| const indexPath = path.join(dist, 'index.html'); |
| const outPath = path.join(dist, 'standalone-preview.html'); |
|
|
| const index = fs.readFileSync(indexPath, 'utf8'); |
| const scriptMatch = index.match(/<script[^>]+src="([^"]+)"[^>]*><\/script>/); |
| const styleMatch = index.match(/<link[^>]+href="([^"]+)"[^>]*>/); |
|
|
| if (!scriptMatch || !styleMatch) { |
| throw new Error('Could not find built JS/CSS assets in dist/index.html'); |
| } |
|
|
| const toAssetPath = (assetUrl) => path.join(dist, assetUrl.replace(/^\/ui\//, '').replace(/^\.\//, '')); |
| let js = fs.readFileSync(toAssetPath(scriptMatch[1]), 'utf8'); |
| const css = fs.readFileSync(toAssetPath(styleMatch[1]), 'utf8'); |
|
|
| js = js.replace(/(["'`])\/ui\/assets\/([^"'`]+\.(png|jpg|jpeg|webp|gif))\1/g, (match, quote, assetName, extension) => { |
| const assetPath = path.join(dist, 'assets', assetName); |
| if (!fs.existsSync(assetPath)) { |
| return match; |
| } |
|
|
| return `${quote}/gradio_api/file=dist/assets/${assetName}${quote}`; |
| }); |
|
|
| const html = `<!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>CultureLens Preview</title> |
| <style>${css}</style> |
| </head> |
| <body> |
| <div id="root"></div> |
| <script type="module">${js}</script> |
| </body> |
| </html> |
| `; |
|
|
| fs.writeFileSync(outPath, html); |
| console.log(outPath); |
|
|
