Necesito ayuda, soy relativamente un Novato

Help me Build my Workflow
1

Hace 3 meses no tenia ni una pisca de conocimiento en la programación de aplicaciones, llevo 8 meses en España y me vine con una idea en mi cabeza, con el apoyo de Géminis AI desde Antigravity empecé a plasmar mi idea de Aplicación de traducción de lenguaje para comunicarme con unos amigos de Alemania, mi flujo está compuesto por 4 nodos ( Webhook1+HTTP RESQUEST +JavaScript t+ Respond to Webhook ), al pulsa en ejecutar flujo de trabajo este se ejecuta en menos de 3 segundos pero mi aplicación que aun se encuentra incompleta y por ahora es Web la cual se activa desde un archivo index que está alojado localmente en mi escritorio del ordenador, ella no logra hacer la traducción al idioma destino y termina entregándome el mensaje original siempre ; Ya no sé que más hacer

1 me gusta
2

Tu flujo de trabajo ejecutándose en menos de 3 segundos significa que la automatización se está ejecutando, pero no prueba que la salida de traducción se esté pasando correctamente. El problema probablemente no es la “traducción” en sí; es probable que sea un problema de mapeo de datos entre tu página web, el webhook, la solicitud HTTP, el nodo JavaScript y la respuesta final.

Yo lo depuraría nodo por nodo:

  1. Verifica la salida del nodo Webhook. Confirma que recibe tanto el texto original como el idioma de destino.

  2. Verifica la entrada del nodo HTTP Request. Confirma que envía el texto y el idioma de destino correctos a la API de traducción.

  3. Verifica la salida del nodo HTTP Request. Confirma que la API realmente devuelve texto traducido.

  4. Verifica el nodo JavaScript. Es posible que esté extrayendo el campo JSON incorrecto o recurriendo al mensaje original.

  5. Verifica el nodo Respond to Webhook. Confirma que devuelve translatedText, no el texto original.

  6. Verifica el JavaScript del frontend. Confirma que muestra el campo traducido de la respuesta del webhook.

Ya que tu aplicación siempre devuelve el texto original, sospecho que hay lógica de reserva como translatedText || originalText, o el nodo de respuesta/frontend está mostrando la variable de texto original. Elimina la reserva durante la depuración para que el flujo de trabajo falle claramente cuando no se encuentre traducción.

La traducción en sí debería ser directa. Ya hemos construido un pipeline estilo transcripción, y traducir texto de transcripción generalmente es solo otro paso de procesamiento. La parte más difícil es asegurar que la variable correcta se mueva a través de la cadena. Si compartes la salida del Webhook, la salida de HTTP Request, el código del nodo JavaScript y el código del fetch del frontend, probablemente podamos identificar el punto exacto de ruptura.

2 Me gusta
3

Es bastante impresionante pasar de cero conocimientos de programación a un pipeline de webhook funcional, así que no deberías rendirte, estás más cerca de lo que crees.

La respuesta anterior cubre bien todos los pasos de depuración, aunque hay algo que vale la pena añadir: la causa más común de «devuelve el mensaje original» en esta configuración es que el nodo JavaScript está cogiendo el campo incorrecto de la respuesta de la API.

Deberías intentar añadir un console.log o usar la vista previa de salida integrada de n8n para ver exactamente qué devuelve el nodo HTTP Request. Intenta fijarte específicamente en la estructura JSON. El texto traducido suele estar anidado un nivel más profundo de lo esperado, así que algo como response.data.translations[0].translatedText dependerá de cuál sea la API que estés usando.

Si compartes cuál es la API de traducción a la que estás accediendo y pegas el código JavaScript que se usó, probablemente alguien pueda identificarlo en 2 minutos.

2 Me gusta
4

"¡Muchas gracias @pratham_gupta y @AnthonyAtXRay por tomarse el tiempo de responder! Sus puntos de depuración son excelentes.

Para darles un poco más de contexto: al principio, cuando hacía pruebas iniciales, todo el flujo parecía responder bien. Sin embargo, los problemas reales en el navegador comenzaron a notarse con más fuerza recientemente. Tras analizarlo a fondo, sospechamos que la lógica interna de n8n está bien, pero el fallo ocurre en la comunicación final: estoy ejecutando la aplicación web de forma local abriendo el archivo index.html directamente desde mi ordenador (file://). Todo apunta a que Google Chrome o las políticas de red locales están bloqueando por CORS la respuesta que viene desde la IP de n8n.

Además, para rematar, justo se me agotaron los créditos de prepago de la API de Google, por lo que el flujo quedó pausado.

Para validar si el mapeo de variables está tan fino como sugieren, les comparto aquí abajo la estructura de mi nodo JavaScript y el flujo general (sin credenciales). ¿Creen que mi teoría de que el formato file:// y CORS son los culpables del bloqueo en el navegador tenga sentido, o ven algún error de lógica en las variables?"

2 Me gusta
5

{
“nodes”: [
{
“parameters”: {
“respondWith”: “json”,
“responseBody”: “={{ $json }}”,
“options”: {
“responseCode”: 200,
“responseHeaders”: {
“entries”: [
{
“name”: “Content-Type”,
“value”: “application/json”
},
{
“name”: “Access-Control-Allow-Origin”,
“value”: “"
},
{
“name”: “Access-Control-Allow-Headers”,
“value”: "”
}
]
}
}
},
“type”: “n8n-nodes-base.respondToWebhook”,
“typeVersion”: 1.5,
“position”: [
752,
112
],
“id”: “7eb0364c-e218-47a7-ba7e-f9d8fe8bb8f8”,
“name”: “Responder al Webhook”
},
{
“parameters”: {
“httpMethod”: “POST”,
“path”: “98bd0d2c-fcf4-49b7-b501-72c81c5d9d44”,
“responseMode”: “responseNode”,
“options”: {
“allowedOrigins”: “*”
}
},
“type”: “n8n-nodes-base.webhook”,
“typeVersion”: 2.1,
“position”: [
80,
112
],
“id”: “0af6f18b-0e1a-4d5c-bca6-7573f4a31cb9”,
“name”: “Webhook1”,
“webhookId”: “c1603781-563f-4655-9b6d-1170e847c6f0”
},
{
“parameters”: {
“method”: “POST”,
“url”: “https://generativelanguage.googleapis.com/v1/models/gemini-2.5-flash:generateContent?key=TU_API_KEY_AQUÍ”,
“sendBody”: true,
“specifyBody”: “json”,
“jsonBody”: “={{ { “contents”: [{ “parts”: [{ “text”: $json.body.text + " - Traduce esto al " + $json.body.target_lang }] }] } }}”,
“options”: {}
},
“id”: “06da87ea-d639-41fa-a859-50ae26c35224”,
“name”: “Solicitud HTTP”,
“type”: “n8n-nodes-base.httpRequest”,
“typeVersion”: 4.4,
“position”: [
304,
112
]
},
{
“parameters”: {
“jsCode”: “const geminiResponse = $input.first().json;\nconst translatedText = geminiResponse.candidates[0].content.parts[0].text.trim();\n\nreturn [\n {\n json: {\n status: “success”,\n original_text: $(‘Webhook1’).item.json.body.text,\n translated_text: translatedText,\n audio_base64: “”\n }\n }\n];”
},
“id”: “576fa8a4-896f-4d33-ad1a-8cfe5d204ec8”,
“name”: “Código en JavaScript”,
“type”: “n8n-nodes-base.code”,
“typeVersion”: 2,
“position”: [
528,
112
]
}
],
“connections”: {
“Webhook1”: {
“main”: [
[
{
“node”: “Solicitud HTTP”,
“type”: “main”,
“index”: 0
}
]
]
},
“Solicitud HTTP”: {
“main”: [
[
{
“node”: “Código en JavaScript”,
“type”: “main”,
“index”: 0
}
]
]
},
“Código en JavaScript”: {
“main”: [
[
{
“node”: “Responder al Webhook”,
“type”: “main”,
“index”: 0
}
]
]
}
],
“pinData”: {},
“meta”: {
“templateCredsSetupCompleted”: true,
“instanceId”: “ANONYMOUS_INSTANCE_ID”
}
}

1 me gusta
6

Freddy, las capturas de pantalla serían útiles, pero basándome en lo que describiste, reduciría esto a una pregunta específica:

¿En qué punto desaparece el texto traducido?

Tu flujo de trabajo de n8n puede estar funcionando correctamente, pero la aplicación web puede seguir leyendo el campo incorrecto.

Lo probaría en este orden:

  1. Nodo Webhook
    Confirma que los datos entrantes contengan algo como:
{
  "text": "hello",
  "targetLanguage": "German"
}
  1. Nodo HTTP Request
    Abre la salida de ejecución del nodo y verifica si la API de traducción devuelve el texto traducido.
    Por ejemplo, algo como:
{
  "translatedText": "Hallo"
}

o a veces puede estar anidado más profundamente, como:

{
  "data": {
    "translation": "Hallo"
  }
}
  1. Nodo JavaScript
    Este es un punto de ruptura común. El código puede estar leyendo el campo incorrecto.

Para depuración, no devuelvas el mensaje original como alternativa. Devuelve un error obvio en su lugar:

const output = $json.translatedText;

if (!output) {
  throw new Error("No translated text found. Check HTTP Request output field name.");
}

return [
  {
    json: {
      translatedText: output
    }
  }
];

Si el texto traducido está anidado, necesitas ajustar la ruta del campo basándote en la salida real de HTTP Request.

  1. Nodo Respond to Webhook
    Asegúrate de que devuelva el valor traducido, no la entrada original.

Respuesta de ejemplo:

{
  "translatedText": "={{$json.translatedText}}"
}
  1. Código fetch del frontend
    Tu página web local puede estar haciendo algo como esto:
resultBox.innerText = data.text;

cuando debería ser:

resultBox.innerText = data.translatedText;

Puesto que tu aplicación siempre devuelve el mensaje original, mi suposición más fuerte es una de estas:

  • el nodo JavaScript está volviendo al texto original

  • el nodo Respond to Webhook está mapeado al campo original

  • el frontend está mostrando el campo original en lugar del campo traducido

  • el nodo HTTP Request devuelve la traducción en una ruta JSON anidada, pero el nodo JS está leyendo la ruta incorrecta

El mejor movimiento de depuración: devuelve temporalmente la salida completa de HTTP Request directamente desde Respond to Webhook. Luego prueba desde la aplicación web y verifica qué JSON recibe realmente tu navegador. Una vez que veas la estructura JSON real, mapear el campo traducido debería ser fácil.

1 me gusta
7

Tu teoría sobre CORS es exactamente correcta, el JSON de tu flujo expone el problema específico.

Tu nodo Webhook tiene “allowedOrigins” configurado a “asterisk”, que es lo que debería ser. Pero tu nodo Respond to Webhook tiene “Access-Control-Allow-Origin” configurado a una cadena vacía. Eso necesitará cambiar a “asterisk” también, de lo contrario Chrome bloqueará la respuesta incluso cuando la solicitud llegue.

El siguiente problema es el protocolo file:// en sí. Chrome termina bloqueando las solicitudes fetch desde páginas file:// a URLs externas independientemente de los encabezados CORS. Es una corrección simple: en lugar de abrir index.html directamente, sírvelo desde un servidor local.

Si tienes Python instalado: python -m http.server 8080 en la carpeta que contiene tu index.html, y luego abre http://localhost:8080

En cuanto a los créditos de la API de Google, una vez que los agotes, la lógica del nodo JavaScript en sí se ve correcta. Y el mapeo de variables a candidates[0].content.parts[0].text es la ruta correcta para respuestas de Gemini.