ia-translate/
├── backend/
│   ├── app.ts
│   ├── translateFlow.ts
│   ├── .env.example
│   ├── .env
│   ├── package.json
│   └── tsconfig.json
├── frontend/
│   ├── index.html
│   ├── styles.css
│   └── translatorIA.js
├── .gitignore
└── README.md

mkdir ia-translate
cd ia-translate

npm init -y
npm install genkit @genkit-ai/googleai dotenv
npm install cors express zod
npm install --save-dev types/cors types/express types/express-serve-static-core types/node typescript

GEMINI_API_KEY=your_api_key_here

import { googleAI } from "@genkit-ai/googleai"
import { genkit, z } from "genkit"
import dotenv from "dotenv"

dotenv.config()

// Định nghĩa schema cho output để Genkit xác nhận cấu trúc dữ liệu
const optionSchema = z.object({
  option: z.string(),
  explanation: z.string(),
})

const improveSchema = z.object({
  resultList: z.array(optionSchema),
})

const translateSchema = z.object({
  resultText: z.string(),
})

const ai = genkit({
  plugins: [googleAI({ apiKey: process.env.GEMINI_API_KEY })],
  model: googleAI.model("gemini-2.5-flash"),
})

export const translateText = ai.defineFlow(
  {
    name: "translateText",
    inputSchema: z.object({
      text: z.string().min(1, "Text is required"),
      language: z.enum(["English", "Spanish"]),
      action: z.enum(["translate", "improve"]),
    }),
  },
  async (input) => {
    const { text, language, action } = input
    const isImprove = action === "improve"
    const prompt = isImprove
      ? `Please improve this ${language} text:\n\n${text}\n\nReturn a list with 2 options to improve the text.`
      : `Translate this to ${language}:\n\n${text}\n\nReturn ONLY the translated text. DO NOT include any additional text, explanations, or suggestions.`

    const result = await ai.generate({
      prompt,
      config: {
        temperature: isImprove ? 0.3 : 0.2,
      },
      output: {
        schema: isImprove ? improveSchema : translateSchema,
      },
    })

    const parsedOutput = result.output
    if (!parsedOutput) throw new Error("No result received from translation flow")

    if (isImprove) {
      if ("resultList" in parsedOutput && Array.isArray(parsedOutput.resultList)) {
        return parsedOutput
      }
      throw new Error("Output for improve action did not match expected schema.")
    } else {
      if ("resultText" in parsedOutput && typeof parsedOutput.resultText === "string") {
        return parsedOutput
      }
      throw new Error("Output for translate action did not match expected schema.")
    }
  },
)

import express from "express"
import cors from "cors"
import { translateText } from "./translateFlow.ts"

interface TranslateRequest {
  text: string
  language: "English" | "Spanish"
  action: "translate" | "improve"
}

const app = express()
const PORT = process.env.PORT || 3001

app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(
  cors({
    origin: "http://localhost:3000",
  }),
)

const translateHandler = (req: express.Request, res: express.Response) => {
  const { text, language, action } = req.body as TranslateRequest

  if (!text || !language || !action) {
    res.status(400).json({ error: "Required fields: text, language, action" })
    return
  }
  if (!text.trim()) {
    res.status(400).json({ error: "Text cannot be empty" })
    return
  }

  translateText({ text, language, action })
    .then((result) => {
      if (!result) throw new Error("No result received from translation flow")
      res.status(200).json(result)
    })
    .catch((error) => {
      console.error("Error in /api/translateText:", error)
      res.status(500).json({ error: "Failed to process request", details: error.message })
    })
}

app.post("/api/translateText", translateHandler)
app.get("/", (_, res) => {
  res.send("Genkit Translation API is running!")
})

app.listen(PORT, () => {
  console.log(`Server listening at http://localhost:${PORT}`)
  console.log(`Access the API at http://localhost:${PORT}/api/translateText`)
})

npm install -g typescript
npm install -g genkit-cli

"scripts": {
  "build": "tsc",
  "dev": "npx ts-node app.ts",
  "start": "genkit start -- npx ts-node app.ts"
}

npm run build
npm run start

document.addEventListener("DOMContentLoaded", () => {
  async function translateTextApiCall({ text, language, action }) {
    try {
      const response = await fetch("http://localhost:3001/api/translateText", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text, language, action }),
      })
      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
      return await response.json()
    } catch (error) {
      console.error("API call error:", error)
      throw new Error("Could not connect to the server or process the request.")
    }
  }

  async function handleAction(action) {
    const text = document.getElementById("originalText").value.trim()
    if (!text) return

    document.getElementById("translatedText").innerHTML = '<span class="loading-spinner">Đang xử lý...</span>'

    try {
      const resultObject = await translateTextApiCall({
        text,
        language: /* giá trị ngôn ngữ chọn bởi người dùng */,
        action,
      })

      if (action === "improve" && resultObject.resultList?.length > 0) {
        renderImproveResult(resultObject)
      } else {
        document.getElementById("translatedText").textContent = resultObject.resultText
      }
    } catch (error) {
      document.getElementById("translatedText").textContent = error.message || "Lỗi xử lý yêu cầu."
    }
  }

  // Các hàm hỗ trợ render kết quả như renderImproveResult có thể được định nghĩa thêm
})

npm install
npm run dev