使用Supabase Edge函数 + GPT3.5构建语言学习工具-DEV365 开发者社区

我正在学习日语，我喜欢NHK的新闻网 - 它每天都有一个新闻故事，每天都用日语写作，而初学者可以理解。

所以当我看到supabase启动自托管边缘功能时，我想尝试构建一个简单的版本，可以翻译和简化足球新闻文章。

Easy Japanese - Football News

这是代码https://github.com/jackbridger/japanese-simple-football-news

如何工作：

抓住一篇用英语写的足球文章（现在这是硬编码，但将来我会使用API或SCRAPER）
检查文章是否已经通过检查缓存（REDIS）
如果是这样，请将文章退还给客户
如果不是，请翻译文章
然后使用GPT 3.5
返回客户

复制它

对于设置，我们将大致遵循Supabase团队的这篇文章。

我将其添加到主/index.ts的服务中，几乎删除了其他所有内容。

我还建议您经历consulting the final code，因为我没有涵盖我更改的所有内容

    const supabaseClient = createClient(
      Deno.env.get('SUPABASE_API_URL'),
      Deno.env.get('SUPABASE_API_ANON_KEY'),
      { global: { headers: { Authorization: req.headers.get('Authorization')! } } }
    )

确保设置

flyctl secrets set SUPABASE_API_ANON_KEY=

和

flyctl secrets set SUPABASE_API_URL=

注册Fly.io帐户并安装flyctl

brew install flyctl

克隆demo repository到您的机器

git clone https://github.com/supabase/self-hosted-edge-functions-demo.git && cd self-hosted-edge-functions-demo

安装deno

我们需要 install deno 在本地运行我们的功能

brew install deno

然后我们可以登录飞行

flyctl auth login

然后我们可以运行

fly launch

这是我选择的选项（请确保在redis/upstash上选择“是”）

➜  self-hosted-edge-functions-demo git:(main) ✗ fly launch
Creating app in /Users/Jack/programming/supa/self-hosted-edge-functions-demo
An existing fly.toml file was found for app supa-edge-demo
? Would you like to copy its configuration to the new app? Yes
Scanning source code
Detected a Dockerfile app
? Choose an app name (leaving blank will default to 'supa-edge-demo') easy-japanese-football
automatically selected personal organization: Jack Bridger
App will use 'syd' region as primary
Created app 'easy-japanese-football' in organization 'personal'
Admin URL: https://fly.io/apps/easy-japanese-football
Hostname: easy-japanese-football.fly.dev
? Would you like to set up a Postgresql database now? No
? Would you like to set up an Upstash Redis database now? Yes
? Select an Upstash Redis plan Free: 100 MB Max Data Size

我们也需要添加我们的supabase srednetials：

然后添加呼叫deepl api-您需要注册免费帐户并获取API密钥（它是免费的，但您需要信用卡）

设置您的DEEPL API键

flyctl secrets set DEEPL_API_KEY=*YOUR_API_KEY*

async function translateTextToJapanese(text: string): Promise<string> {
  const response = await fetch(DEEPL_API_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "Authorization": `DeepL-Auth-Key ${Deno.env.get('DEEPL_API_KEY')}`,
    },
    body: new URLSearchParams({
      text: text,
      target_lang: "JA",
    }),
  });

然后打电话给Openai，这不是免费的，但应该是每个API呼叫的美分，我认为有免费试用。

设置API键

flyctl secrets set OPENAI_API_KEY=*API_KEY*

    async function rewriteToN5Japanese(text) {
      try {
const openAI = new OpenAI(Deno.env.get('OPENAI_API_KEY'));
        const response = await openAI.createChatCompletion({
          model: "gpt-3.5-turbo",
          messages: [
            {
              role: "system",
              content: "わかりやすい日本語を書くのが得意な親切なアシスタントさんですね。特にn-5レベルの外国人向けの文章を得意としています。", // You are a helpful assistant that is great at writing easy-to-understand Japanese. You are especially good at writing for n-5 level foreigners.
            },
            {
              role: "user",
              content: `以下の文章を、N5レベルの簡単な文章に書き換える。: ${text}`, // Rewrite the following text into simple N5 level text
            },
          ],
          max_tokens: 200, // Limit the response length
        });


        const translatedText = response.choices[0].message.content.trim();
        return translatedText;
      } catch (error) {
        console.error('Error translating text:', error);
        return '';
      }
    }

然后，我们需要从Upstassh和

获得Redis Srednetials

我们会导入重新介绍并这样的初始化。

import {
  connect as redisConnect
} from 'https://deno.land/x/redis/mod.ts';
...
      const redisClient = await redisConnect({
        hostname: "fly-easy-japanese-football-redis.upstash.io",
        port: 6379,
        password: Deno.env.get('REDIS_PW'),
        maxRetryCount: 10,
        retryInterval: 100000,
      });

然后检查缓存我们使用此代码：

      if (translatedAlr){
        console.log("already exists")
        translatedAndSimplified = translatedAlr
        return new Response(JSON.stringify(translatedAndSimplified), {
          headers,
          status: 200,
        })
      }

请注意，Redis实际上只是一个关键值查找。

现在我们可以做飞行

fly deploy

，然后我们可以通过fly.io

的仪表板进行检查

然后，我去了chat.opneai.com，并使用GPT 4使用此提示来生成一些基本的HTML：

Make a html page for me that queries this api https://jp-football.fly.dev/

"リバプールは、サラー選手とイオタ選手が得点し、リーズ・ユナイテッドを2-1で破りました。これで、リバプールはプレミアリーグで5試合ぶりの勝利となりました。前の試合では、5失点しましたが、今回は攻撃面で優位に立ちました。"

It gets back an article like the above.

It should be a single page with a random unsplash football image.

The text should be nice to read, in the style of Medium (the blogging site).

The title is "Easy Japanese Football News"

Use only html css and js

我将其复制到index.html文件中，看起来很不错。

部署HTML页面

最后。我在Tiiny上部署了一个页面网站 - 这只是拖动我的index.html

的情况。

https://easy-japanese-news-football.tiiny.site/

下一步是将其设置为使用新闻API或进行一些刮擦。并完善我的GPT提示，因为日语翻译还不是完美的。

这再次是完整的代码https://github.com/jackbridger/japanese-simple-football-news