Enhance your team’s productivity by creating a custom Slack bot capable of translating image content. This step-by-step guide will show you how to leverage ChatGPT and Node.js to add this innovative feature to your Slack workspace.

Step 1: Initiate Your Slack Application

1. Begin by visiting the Slack API page and select “Create New App.”

2. Once your app is created, access Settings > Basic Information to retrieve your Signing Secret and add it to your .env file as SLACK_SIGNING_SECRET.

3. Generate an App-Level Token with Generate Token and Scopes and record it in your .env file as SLACK_APP_TOKEN.

4. Install your app to your workspace from Features > OAuth & Permissions to obtain the Bot User OAuth Token, noted as SLACK_BOT_TOKEN in your .env.

5. Assign necessary bot scopes under Features > OAuth & Permissions > Scopes, including:

• app_mentions:read

• chat:write

• chat:write.public

• im:history

• im:read

• im:write

• incoming-webhook

6. Add the user token scope channels:read under Features > OAuth & Permissions > User Token Scopes.

7. Activate event handling in Features > Event Subscriptions.

8. Turn on Socket Mode within Settings > Socket Mode.

Step 2: Configure Your Bot

1. Clone the sample bot repository from get-text-slack-app.
2. Transition to the project directory using:

   cd app_slack
   

3. Install necessary dependencies with:

   yarn
   

4. Launch your bot by executing:

   node index.js
   

Step 3: Enable Image Content Translation

1. Extract Image from Message and Convert to ArrayBuffer

let imgUrl = event?.files[0]?.url_private;
const downloadFile = () =>
    axios({
      url: imgUrl,
      headers: {
        Authorization: `Bearer ${process.env.SLACK_BOT_TOKEN}`, // Slack requires authorization for file access
      },
      responseType: "arraybuffer",
    }).then((res) => res.data);
const res = await downloadFile();

2. Implement Text Recognition Software

Install Tesseract.js with:

npm install tesseract.js

Activate text recognition using:

const { createWorker } = require("tesseract.js");

const worker = await createWorker();
await worker.loadLanguage("jpn+eng+vie"); // Specify languages as needed
await worker.initialize("jpn+eng+vie");
const { data: { text } } = await worker.recognize(res);
await worker.terminate();

3. Customize ChatGPT for Translation Tasks

Train ChatGPT via OpenAI’s API:

const completion = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [
      { role: "system", content: "You are a good translator" },
      { role: "user", content: "Xin chào, tôi là Đoan" },
      { role: "assistant", content: "Vietnamese: Xin chào, tôi là Đoan\nEnglish: Hello, I am Doan" },
      { role: "user", content: "Hello, I am Doan" },
      { role: "assistant", content: "Vietnamese: Xin chào, tôi là Doan\nEnglish: Hello, I am Doan" },
      { role: "user", content: "受 診 者 情 報 の 登 録 ・ 更 新 を し て く だ さ い" },
      { role: "assistant", content: "Vietnamese: Đăng ký và cập nhật thông tin bệnh nhân\nEnglish: Register and update patient information" },
      { role: "user", content: text },
    ],
    temperature: 0.7,
    top_p: 1,
    max_tokens: 1000,
});
return completion.data.choices[0].message.content;

4. Result

Conclusion

This tutorial provides a glimpse into the powerful capabilities you can integrate into your Slack bot, boosting efficiency and simplifying daily tasks. Follow these instructions to build advanced tools that support your team’s success.

Have questions or need further assistance? Don’t hesitate to reach out—let’s innovate together! Thank you for engaging with our guide! 🙇‍♂