Spaces:

OnyxMunk
/

text-transformer

Sleeping

App Files Files Community

OnyxlMunkey commited on Feb 20

Commit

cc036eb

1 Parent(s): 0f5ca68

Fix: use same-origin proxy for HF inference (avoid CORS)

Browse files

Files changed (6) hide show

.gitattributes +1 -0
Dockerfile +21 -6
entrypoint.sh +10 -0
index.html +2 -0
scripts/debug-space.js +76 -0
src/components/TinyLlamaConverter.jsx +11 -7

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.sh text eol=lf

Dockerfile CHANGED Viewed

@@ -32,21 +32,36 @@ RUN npm run build
 # Stage 2: Serve the application with Nginx
 FROM nginx:alpine
 COPY --from=builder /app/dist /usr/share/nginx/html
-# Copy custom nginx config if needed (optional but good practice for SPAs)
-# Creating a simple config inline to handle client-side routing fallback
 RUN echo 'server { \
     listen 7860; \
     location / { \
         root /usr/share/nginx/html; \
         index index.html index.htm; \
         try_files $uri $uri/ /index.html; \
     } \
-}' > /etc/nginx/conf.d/default.conf
-# Expose port 7860 for Hugging Face Spaces
 EXPOSE 7860
-# Start Nginx
-CMD ["nginx", "-g", "daemon off;"]

 # Stage 2: Serve the application with Nginx
 FROM nginx:alpine
+RUN adduser -D -u 1000 appuser
 COPY --from=builder /app/dist /usr/share/nginx/html
+COPY entrypoint.sh /entrypoint.sh
 RUN echo 'server { \
     listen 7860; \
+    location /api/hf-inference/ { \
+        rewrite ^/api/hf-inference/(.*)$ /$1 break; \
+        proxy_pass https://api-inference.huggingface.co; \
+        proxy_http_version 1.1; \
+        proxy_set_header Host api-inference.huggingface.co; \
+        proxy_set_header Authorization "Bearer __VITE_HF_TOKEN__"; \
+        proxy_pass_request_headers on; \
+        proxy_buffering off; \
+    } \
     location / { \
         root /usr/share/nginx/html; \
         index index.html index.htm; \
         try_files $uri $uri/ /index.html; \
     } \
+}' > /etc/nginx/conf.d/default.conf.tpl
+RUN sed 's|__VITE_HF_TOKEN__||g' /etc/nginx/conf.d/default.conf.tpl > /etc/nginx/conf.d/default.conf
+RUN chmod +x /entrypoint.sh && \
+    chown -R appuser:appuser /usr/share/nginx/html /var/cache/nginx /var/log/nginx /etc/nginx/conf.d && \
+    touch /var/run/nginx.pid && chown appuser:appuser /var/run/nginx.pid
+USER appuser
 EXPOSE 7860
+ENTRYPOINT ["/entrypoint.sh"]

entrypoint.sh ADDED Viewed

	@@ -0,0 +1,10 @@

+#!/bin/sh
+# Inject runtime env and nginx proxy config (avoids CORS: browser hits same origin, nginx forwards to HF with token)
+TOKEN="${VITE_HF_TOKEN:-}"
+ESCAPED=$(printf '%s' "$TOKEN" | sed 's/\\/\\\\/g; s/"/\\"/g; s/\$/\\$/g')
+printf 'window.__HF_ENV={"VITE_HF_TOKEN":"%s"};\n' "$ESCAPED" > /usr/share/nginx/html/config.js
+# Substitute token into nginx config (proxy avoids CORS)
+sed "s|__VITE_HF_TOKEN__|$TOKEN|g" /etc/nginx/conf.d/default.conf.tpl > /etc/nginx/conf.d/default.conf
+exec nginx -g "daemon off;"

index.html CHANGED Viewed

@@ -7,6 +7,8 @@
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

   </head>
   <body>
     <div id="root"></div>
+    <script>window.__HF_ENV=window.__HF_ENV||{};</script>
+    <script src="/config.js"></script>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

scripts/debug-space.js ADDED Viewed

	@@ -0,0 +1,76 @@

+/**
+ * Playwright script: open HF Space, trigger TinyLlama, capture console/network errors.
+ * Run: node scripts/debug-space.js
+ * Or with auth URL: SPACE_URL="https://user:TOKEN@huggingface.co/spaces/OnyxMunk/text-transformer" node scripts/debug-space.js
+ */
+const { chromium } = require('playwright');
+const SPACE_URL = process.env.SPACE_URL || 'https://huggingface.co/spaces/OnyxMunk/text-transformer';
+async function main() {
+  const browser = await chromium.launch({ headless: false });
+  const context = await browser.newContext();
+  const consoleLogs = [];
+  const requestFailures = [];
+  context.on('console', (msg) => {
+    const text = msg.text();
+    const type = msg.type();
+    consoleLogs.push({ type, text });
+    if (type === 'error' || text.toLowerCase().includes('failed') || text.toLowerCase().includes('cors')) {
+      console.error(`[CONSOLE ${type}]`, text);
+    }
+  });
+  context.on('requestfailed', (request) => {
+    const failure = { url: request.url(), failure: request.failure()?.errorText };
+    requestFailures.push(failure);
+    console.error('[REQUEST FAILED]', failure.url, failure.failure);
+  });
+  const page = await context.newPage();
+  await page.goto(SPACE_URL, { waitUntil: 'domcontentloaded', timeout: 60000 }).catch((e) => {
+    console.error('Navigate error:', e.message);
+  });
+  await page.waitForTimeout(5000);
+  const snapshot = await page.content();
+  if (snapshot.includes('Failed to connect') || snapshot.includes('CORS') || snapshot.includes('error')) {
+    const match = snapshot.match(/>([^<]*(?:Failed to connect|CORS|error)[^<]*)</);
+    if (match) console.error('Page contains error text:', match[1].trim().slice(0, 200));
+  }
+  const tinyLlamaTab = page.locator('button, [role="tab"], a').filter({ hasText: /TinyLlama|Tiny Llama/i }).first();
+  if (await tinyLlamaTab.count() > 0) {
+    await tinyLlamaTab.click();
+    await page.waitForTimeout(1500);
+    const promptInput = page.locator('textarea[placeholder*="TinyLlama"], textarea[id="llama-input"], textarea').first();
+    if (await promptInput.count() > 0) {
+      await promptInput.fill('Hello');
+      await page.waitForTimeout(500);
+      const generateBtn = page.locator('button[title="Generate Response"], button').filter({ hasText: /Generate|⚡/ }).first();
+      if (await generateBtn.count() > 0) {
+        await generateBtn.click();
+        await page.waitForTimeout(8000);
+      }
+    }
+  }
+  const errorEl = page.locator('text=/Failed to connect|CORS|error/i').first();
+  if (await errorEl.count() > 0) {
+    console.error('Visible error on page:', await errorEl.textContent());
+  }
+  console.log('\n--- Console messages (errors/warnings) ---');
+  consoleLogs.filter((m) => m.type === 'error' || m.type === 'warning').forEach((m) => console.log(m.type, m.text));
+  console.log('\n--- Failed network requests ---');
+  requestFailures.forEach((f) => console.log(f.url, f.failure));
+  await browser.close();
+}
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

src/components/TinyLlamaConverter.jsx CHANGED Viewed

@@ -12,7 +12,9 @@ function getTinyLlamaConfig() {
   if (typeof window === 'undefined') return { provider: 'ollama', baseUrl: OLLAMA_BASE };
   const host = window.location.hostname;
   if (host === 'localhost' || host === '127.0.0.1') return { provider: 'ollama', baseUrl: OLLAMA_BASE };
-  if (host.includes('huggingface.co') || host.includes('hf.space')) return { provider: 'hf', baseUrl: 'https://api-inference.huggingface.co', token: env.VITE_HF_TOKEN };
   if (host.includes('vercel.app')) {
     const vercelUrl = env.VITE_TINYLLAMA_VERCEL_URL?.trim();
     return { provider: 'ollama', baseUrl: vercelUrl || OLLAMA_BASE };
@@ -39,12 +41,10 @@ const TinyLlamaConverter = ({ sharedInput, setSharedInput }) => {
     try {
       if (config.provider === 'hf') {
-        const url = `${config.baseUrl}/models/${HF_MODEL}`;
-        const headers = { 'Content-Type': 'application/json' };
-        if (config.token) headers['Authorization'] = `Bearer ${config.token}`;
         const res = await fetch(url, {
           method: 'POST',
-          headers,
           body: JSON.stringify({
             inputs: sharedInput.trim(),
             parameters: { max_new_tokens: 512, return_full_text: false },
@@ -52,7 +52,9 @@ const TinyLlamaConverter = ({ sharedInput, setSharedInput }) => {
         });
         if (!res.ok) {
           const errBody = await res.text();
-          throw new Error(res.status === 401 ? 'Hugging Face token missing or invalid. Set VITE_HF_TOKEN.' : errBody || res.statusText);
         }
         const data = await res.json();
         const text = Array.isArray(data) ? data[0]?.generated_text : data?.generated_text;
@@ -82,7 +84,9 @@ const TinyLlamaConverter = ({ sharedInput, setSharedInput }) => {
       if (err.message.includes("Failed to fetch")) {
         const msg = config.provider === 'ollama' && config.baseUrl === OLLAMA_BASE
           ? "Failed to connect to Ollama. Ensure it's running on port 11434 and CORS is allowed (OLLAMA_ORIGINS=\"*\")."
-          : `Failed to connect to ${config.baseUrl}. Check network and CORS.`;
         setError(msg);
       } else {
         setError(err.message);

   if (typeof window === 'undefined') return { provider: 'ollama', baseUrl: OLLAMA_BASE };
   const host = window.location.hostname;
   if (host === 'localhost' || host === '127.0.0.1') return { provider: 'ollama', baseUrl: OLLAMA_BASE };
+  if (host.includes('huggingface.co') || host.includes('hf.space')) {
+    return { provider: 'hf', baseUrl: '/api/hf-inference', token: null };
+  }
   if (host.includes('vercel.app')) {
     const vercelUrl = env.VITE_TINYLLAMA_VERCEL_URL?.trim();
     return { provider: 'ollama', baseUrl: vercelUrl || OLLAMA_BASE };
     try {
       if (config.provider === 'hf') {
+        const url = `/api/hf-inference/models/${HF_MODEL}`;
         const res = await fetch(url, {
           method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
             inputs: sharedInput.trim(),
             parameters: { max_new_tokens: 512, return_full_text: false },
         });
         if (!res.ok) {
           const errBody = await res.text();
+          throw new Error(res.status === 401
+            ? 'Hugging Face token missing or invalid. Add VITE_HF_TOKEN in Space Settings → Variables and secrets, then restart.'
+            : errBody || res.statusText);
         }
         const data = await res.json();
         const text = Array.isArray(data) ? data[0]?.generated_text : data?.generated_text;
       if (err.message.includes("Failed to fetch")) {
         const msg = config.provider === 'ollama' && config.baseUrl === OLLAMA_BASE
           ? "Failed to connect to Ollama. Ensure it's running on port 11434 and CORS is allowed (OLLAMA_ORIGINS=\"*\")."
+          : config.provider === 'hf'
+            ? "CORS or network error. Ensure the latest code is deployed (with /api/hf-inference proxy) and VITE_HF_TOKEN is set in Space Settings → Secrets, then restart."
+            : `Failed to connect to ${config.baseUrl}. Check network and CORS.`;
         setError(msg);
       } else {
         setError(err.message);