Forem: shunnNet

Introducing Vue Modal Route

shunnNet — Sun, 04 May 2025 04:47:39 +0000

vue-modal-route is a package based on Vue 3 and vue-router, implementing the concept of modal routes.

It does not include any Modal UI components—only handling visibility states, state passing, etc. This makes it possible to integrate with any library that provides Modal components.

You can now play with it in online playground.

What is a modal route?

When I say "modal route," I mean a scenario where opening a modal causes the URL to change. You might have heard of or experienced what's called a Twitter-style modal, which is a good example of this. Moreover, when you directly visit that URL, you see the modal's content as a full page instead of a modal.

This kind of modal route can be easily implemented in Next.js using Parallel Routes. In Nuxt.js, you can use Nuxt Pages Plus to achieve this.

Motivation

The idea to implement modal routes came from a user experience I had on an Android phone. When browsing a webpage on mobile, I often encounter modals that cover almost the entire screen. My instinct is to press the < (back) button to exit the modal, but it ends up exiting the entire page instead, which is frustrating.

On mobile web, the back action usually means going to the "previous page." To avoid this issue, the modal toggle should be tied to the page URL. Opening or closing a modal should be treated the same as navigating to or away from a page.

This is why I need modal routes.

Also, modals often need routing capabilities. For instance, have you ever had a requirement where a modal should automatically open when a user visits a URL with a specific query string? Or wanted to implement a multi-step process inside a modal but found it hard to integrate with router-view?

If we have modal routes, all of the above situations can be handled much more elegantly.

Features and Implementation

Although I mentioned Twitter-style modal implementations, @vmrh/modal-route is not a Twitter-style modal.

Like Twitter-style modals, the URL changes when the modal is opened. However, when you directly visit that URL, the content is still shown as a modal (possibly configurable in the future). In many situations, I think it’s more desirable to still present it as a modal instead of a full page. This feels more consistent with how most websites behave.

Secondly, @vmrh/modal-route allows you to pass complex objects when opening a modal—not just URL-compatible data. In other words, you can call openModal({ user: UserObject }) and pass any kind of data.

I aim to make this package capable of handling all modal scenarios. Having some modals behave like routes and others not creates inconsistent user experiences, which is not ideal.

Also, modals often require passing around various types of data, and what the URL can carry alone is not enough.

Third, beyond the typical one-route-one-modal setup, @vmrh/modal-route provides three types of modal routes to handle different modal scenarios:

Path modal: A modal specific to one page, similar to a typical modal route with a fixed URL.
Global modal: A modal that can appear on any page, like a login modal. Its route is dynamically appended to the current route.
Query modal: A functional modal (e.g., alert or confirm). When triggered, it shows a corresponding query string.

The History Challenge

One major challenge with modal routes is dealing with window.history. While the goal is to integrate with the browser history for a smoother UX, this integration also causes complications.

When a modal opens, the corresponding URL should reflect that change. To allow the user to close the modal using the "Back" button, we use router.push when opening. But how should we close it?

Let’s go through a few scenarios using three modals: A, B, and C on the /home page.

A: /home/A
B: /home/B
C: /home/A/C

Scenario 1: /home -> /home/modal-a

When the user is on /home and clicks a button to open modal A, the URL changes to /home/modal-a. At this point, using "go back" will return to /home, thereby closing modal A. But if the user clicks the "Close" button to close modal A manually, the question is:

Should we...

push to /home, or
back to /home?

I choose to back to /home, because this aligns with the browser history state as if the user simply clicked the "back" button.

1. Modal A Open

              v ----------> V
(page) --> /home -> /home/modal-a

---
2. Close modal with `Prev step`

             V <----------- v
(page) --> /home -> /home/modal-a

--- 

2-1. Close modal with `.push`

                            v -------> V
(page) --> /home -> /home/modal-a -> /home

If .push is used, the user technically returns to /home, but when they try to go "back" again to get to the previous (page), they end up back at A. This creates an inconsistent experience.

I believe that when the user closes a modal, they naturally expect to be exiting the modal, not creating a new entry in the history stack.

Therefore, when the user "closes" a modal, the app should back to /home.

Scenario 2: `/home → /home/modal-a → /home/modal-a/modal-c`

Continuing from Scenario 1, the user first clicks a button on /home to open modal A, changing the URL to /home/modal-a. Then, they click a button inside A to open modal C, updating the URL to /home/modal-a/modal-c.

Since /home/modal-a/modal-c is a child route of /home/modal-a, modal A remains visible in the background while modal C appears on top of it.

1. Modal A Open

            v -----------> V
(page) --> /home -> /home/modal-a

2. Modal C Open

             v -----------> v ---------------------> V
(page) --> /home -> /home/modal-a -> /home/modal-a/modal-c

This scenario is similar to Scenario 1 but better highlights the inconsistency caused by using .push to close a modal.

If .push is used to close C, returning to A creates a situation where the "previous step" no longer closes A, but instead reopens modal C. That’s because "going back" would now return to /home/modal-a/modal-c.

1. Close Modal C by `.push`

             v -----------> v ---------------------> v --------------> V
(page) --> /home -> /home/modal-a -> /home/modal-a/modal-c -> /home/modal-a

Therefore, when the user "closes" a modal, we should use back to return to the previous step, ensuring a proper modal closing experience.

Scenario 3: `/home → /home/modal-a → /home/modal-b`

Now let’s look at a slightly more unusual case.

Both modals A and B exist on the /home page. After entering /home, the user clicks a button that opens modal A. Then, from within modal A, the user clicks another button that opens modal B. Since this navigates away from /home/modal-a, modal A is closed, leaving only modal B visible on the screen.

1. Modal A Open

              v -----------> V
(page) --> /home -> /home/modal-a

2. Modal B Open

             v -----------> v -------------> V
(page) --> /home -> /home/modal-a -> /home/modal-b

At this point, what should happen when the user goes "back" or clicks "close"?

Following the logic from Scenario 1, both "close" and "back" mean going back one step in history. So, it might make sense to return to /home/modal-a and reopen modal A.

But from another perspective, when a modal is opened on a page and the user clicks the "X" to close it, the common user expectation—based on typical web interactions—is to return directly to /home. From a visual experience standpoint, this feels more intuitive.

Both behaviors are valid and could make sense in different contexts. However, the latter (returning to /home) aligns better with modern UX conventions. Therefore, @vmrh/modal-route chooses this as the default behavior.

Wait a second—return to /home? Didn't we say earlier that "close" or "back" should simply go back one history entry? That would return to /home/modal-a, not /home. So how do we end up at /home?

@vmrh/modal-route rewrites the history stack during modal opening and closing through a sequence of actions to fulfill this behavior:

1. Modal A Open

              v -----------> V
(page) --> /home -> /home/modal-a

2. Modal B Open - 1. `.back()` to `/home`

             V <----------- v 
(page) --> /home -> /home/modal-a

3. Modal B Open - 2. `.push()` to `/home/modal-b`

             v ----------> V 
(page) --> /home -> /home/modal-b

@vmrh/modal-route calculates the common ancestor route of the two modals, first using .back() to return to the shared base (/home), then .push() to navigate to the target modal route. As a result, when you open /home/modal-b, closing it or going "back" will return you to /home

Scenario 4: `/home/modal-a/modal-c`

What if we skip A and directly go to C? Both A and C show up since C is a child of A.

1. Modal C Open

              v ------------------> V
(page) --> /home -> /home/modal-a/modal-c

Should closing C go back to A or to /home?

Default behavior is to go back to A. This is achieved by inserting intermediate history entries:

1. Modal C Open - (1) `.push` to `/home/modal-a`

              v ----------> V
(page) --> /home -> /home/modal-a

2. Modal C Open - (2) `.push` to `/home/modal-a/modal-c`

              v ----------> v ---------------------> V
(page) --> /home -> /home/modal-a -> /home/modal-a/modal-c

So "Back" from C still lands on A.

If A is closed while on a child route, it still goes back to /home.

1. Modal A Open - `.push` to `/home/modal-a`
              3             4
              v ----------> V
(page) --> /home -> /home/modal-a

2. Go to A's child path - `.push` to `/home/modal-a/child`
              3             4                        5
              v ----------> v ---------------------> V
(page) --> /home -> /home/modal-a -> /home/modal-a/child

3. Close A: `.back(5 - 3)`
              3              4                       5
              v <----------------------------------- V
(page) --> /home -> /home/modal-a -> /home/modal-a/child

Scenario 5: `/home/modal-b`

What if the user enters the site directly at /home/modal-b?

1. Enter `/home/modal-b`
                 V
(??) --> /home/modal-b

We likely want the user to remain on the site after closing the modal. But if we just back, they’ll leave the site.

You might think we could manipulate history when entering:

1. Modal b Open - (1) enter website

                 V
(??) --> /home/modal-b

2. Modal b Open - (2) replace `/home/modal-b` to `/home`

              V
(page) --> /home

3. Modal b Open - (3) `.push()` to `/home/modal-b`

              v ----------> V
(page) --> /home -> /home/modal-b

But due to browser optimization, .push becomes .replace if no user interaction has occurred. So history remains:

                   V
(page) --> /home/modal-b

Thus, @vmrh/modal-route modifies history when closing the modal instead:
@vmrh/modal-route in the above scenario rewrites the history when the modal is "closed".

1. Modal B Open - enter website

                 V
(??) --> /home/modal-b

--- 
2. Modal B Close - (1) replace `/home/modal-b` with `/home`

              V
(page) --> /home

--- 
3. Modal B Close - (2) `.push()` to `/home/modal-b`

              v ----------> V
(page) --> /home -> /home/modal-b

--- 
4. Modal B Close - (3) `.back()` to `/home`

              v ----------> V
(page) --> /home -> /home/modal-b

This makes it possible to "close" modal B while still staying within the website.

However, when modal B is open, pressing "back" may exit the website. This is because Vue Router cannot prevent the "back" action from leaving the site.

Wrapping up

Although @vmrh/modal-route involves some special history manipulations under the hood, its default behavior is almost indistinguishable from a regular modal toggle on a webpage. Therefore, it can be used as a typical modal state controller — with the added feature of modal-route functionality: enabling "back to close" behavior.

Optional behaviors can also be enabled, such as allowing the modal to open when directly entering the webpage. However, enabling such features introduces new details that need to be considered and handled. In the future, this package will offer more of these customizable behaviors.

https://github.com/shunnNet/vue-modal-route

✨ Co - A frontend development AI which create and write the content of the referenced files.

shunnNet — Sun, 09 Feb 2025 15:53:08 +0000

Introduction

Co is a frontend development AI writing assistant, similar to Copilot but with a different working approach, will automatically create and write the content of the referenced files in the code.

Features

✨ Auto write/rewrite when you import a module (with special comments)
🌴 Generate a project by markdown
🛠️ TDD: auto generate implementation when writing test cases.

Demo

Using OpenAI gpt-4o-mini

Click image to see the demo.

Vue - Write a simple page

Vue - Write autocomplete input

Markdown: Generate a project

TDD

Quick start

Install the package.

npm install @imaginary-ai/core

Create co.config.{js|ts} in current working directory.

// co.config.ts
import { OpenAITextGenerator, defineCoConfig } from '@imaginary-ai/core'

export default defineCoConfig({
  baseDir: '.',
  includes: ['**/*.js', '**/*.ts', '**/*.md'],
  excludes: ['**/node_modules/**', '**/.vscode', '**/.git/**', '**/ai.css'],
  generator: new OpenAITextGenerator({
    apiKey: '...', // Put your OPENAI_API_KEY here
    model: 'gpt-4o-mini',
    temperature: 0,
  }),
})

Write some code import a function:

// @co:
import { sayHello } from "./path-to-file.js"
// @co-end

sayHello()

Go to terminal run npx co run, then path-to-file.js will be generated.

// path-to-file.js
export function sayHello() {
    console.log("Hello, World!");
}

Usage

Check documentation for more usages.

Why `Co` ?

Small Issues with Copilot

I believe many people have used GitHub Copilot or similar code assistants. Personally, I use GitHub Copilot.

The feature I use most frequently in GitHub Copilot is autocomplete. While editing a file, the model predicts the next content and provides suggestions.

This truly deserves the name Copilot—it always lends a helping hand just when you’re feeling exhausted from coding. I often find myself genuinely grateful for it in those moments. At this point, I’ve gotten so used to autocomplete suggestions that it feels strange when they don’t appear.

Within a single file, it often does a good job predicting what I need. However, things get a bit awkward when working across multiple files.

For example, while writing File A, I realize I need a File B containing some functions to complete my work in File A.

With GitHub Copilot:

It's best to have two tabs open simultaneously—one for File A and one for File B—to provide the model with the correct context (which might mean closing all other tabs first).
Switch to File B and write the functions I need. (If lucky, Copilot might guess what I want and autocomplete them for me.)
I return to File A and import the functions from File B.

If your Copilot behaves like mine, it’s probably most helpful in step 3, when it knows which functions you are trying to use. When I am editing File B, it is harder for Copilot to infer what I want to write based on File A.

Additionally, this disrupts my work in File A. Can it be made even smoother?

How Co Is Different

I imagined a different kind of Copilot: one that doesn't just autocomplete within a single file but also understands your intent and writes the files you need in your workspace—almost like having two engineers working on the same project simultaneously.

That’s what Co does. With Co, the workflow becomes:

In File A, reference the function I want from File B.
Save the file.
If necessary, modify File B.

Co will automatically generate the module you need and create an appropriate interface based on how you use the function in File A.

The advantage of this approach is that you don’t need to describe what you want in natural language. Describing a feature in natural language can be more cumbersome than just writing a piece of code to demonstrate it—LLMs seem to work the same way. Using natural language forces us to translate abstract code concepts into descriptive sentences, which every software engineer knows can be frustrating.

This method may aligns more closely with how LLMs excel at autocomplete.

Of course, this isn’t meant to replace Copilot. Copilot's autocomplete is great, and its ability to generate documentation or refactor code is also useful. Co simply complements Copilot by addressing one of its limitations (in my opinion).

How Does Co Work?

From an AI perspective, it uses a simple prompt and makes a single request—no agent-based techniques are involved.

We have "source files" reference a file not been written, I need you write the "referenced file" contents which fulfill the usage requirements in other source files. You must only return file content without any word.

${sourceFileContents}

---referenced file---
filename: ${this.path}
content:

Use Cases and Potential of Co

Prototyping

Co is great for quickly generating module interfaces while keeping you in your workflow. Of course, the generated code won’t be perfect—it will still require some manual refinement. An ideal workflow might look like this:

> Edit Module A  
> Import module B in A and use it as if it’s already implemented.  
> Complete Module A.  
> Edit Module B.  
> Import module C in B and use it as if it’s already implemented.  
> Complete Module B.  
> Edit Module C.  
> ....

TDD (Test-Driven Development)

This workflow is actually quite similar to TDD: define how something should be used before implementing it.

With Co, you can generate interface modules while writing test cases. When combined with Copilot, this approach can be even more powerful.

Handling input file in Vue

shunnNet — Sun, 17 Mar 2024 10:16:12 +0000

The official Vue documentation does not explicitly mention how to handle input files.

If you search for "vue input file" you will find many answers like this:

<script setup>
import { shallowRef, ref } from "vue"
const inputRef = shallowRef()
const files = ref([])
const onChange = (e) => {
  files.value = e.target.files
}
const clear = () => {
  inputRef.value.value = ''
  files.value = []
}
</script>

<template>
  <input ref="inputRef" type="file" multiple @change="onChange" />
  <button @click="clear">Clear</button>
</template>

Because you cannot directly set the value of the input file, you cannot use v-model too.

`.files`

In addition to inputFile.value, you can also use inputFile.files to access the value of the input file.

inputFile.files // FileList

.value is almost read-only (can only be programmatically reset). But .files can be set using FileList. You can assign it a FileList object. For example, you can place the files from inputFile1 into inputFile2's files.

const files = inputFile1.files

inputFile2.files = files

In other words, we can set value of input file using javascript.

v-bind dom properties

This feature of Vue might be a bit obscure? Because even after playing with Vue for several years, it's my first time encountering this functionality, and I've found that it's been supported since Vue 2.

The v-bind syntax supports setting DOM properties.

In Vue 3, when you use v-bind on an HTML tag and the attribute is not a standard HTML attribute, Vue will use the in operator to determine if it's a property of the DOM element. You can check v-bind document。

Combining with the feature of .files property, we can make a more controllable input file.

<script setup>
import { shallowRef, ref } from "vue"
const files = ref()
const onChange = (e) => {
  files.value = e.target.files
}
const clear = () => {
  files.value = new DataTransfer().files // fill in a empty FileList
}
</script>

<template>
  <input 
    type="file" 
    multiple 
    :files="files" 
    @change="onChange" 
  />
  <button @click="clear">Clear</button>
</template>

You can check live example here: https://stackblitz.com/edit/vitejs-vite-n16j6w?embed=1&file=src%2FApp.vue

Reference

給前端的簡單 AI 教學 - 2.4 prompt 總結與雜談

shunnNet — Fri, 05 Jan 2024 16:44:03 +0000

在前幾篇中有看到一些 prompt，這篇算是一個整理。不會有實作的部分。然後，由於我本身並不是機器學習專家，所以以下文章的內容算是一些非專業的經驗談。嗯好，要開始了。

1. 理解 prompt

首先先來回顧一下，前幾篇在呼叫 OpenAI GPT 的時候，我們都會送一個 payload 給他，大概是長這樣的：

[
  {
    "role": "system",
    "content": "你是一個客服人員，心情不太好，但是又必須保持專業的跟客人說話。"
  },
  {
    "role": "user",
    "content": "你們的 APP 怎麼不能用？"
  },
  {
    "role": "assistant",
    "content": "請問是哪裡不能用呢？"
  },
  {
    "role": "user",
    "content": "就卡住了啊"
  },
]

我一開始只有用過 OpenAI GPT 的語言模型，直到後來我接觸到其他語言模型，發現他們沒有地方給我輸入上面那種 JSON payload，反而告訴我，如果要實現對話功能，請使用以下的範例：

你是一個客服人員，心情不太好，但是又必須保持專業的跟客人說話。

user: 你們的 APP 怎麼不能用？
assistant: 請問是哪裡不能用呢？
user: 就卡住了啊
assistant:

然後模型就會回應 assistant 會說的話：

啊是不會說清楚喔！？

1.1 為什麼叫 `completion` ?

可能你曾經注意到，OpenAI GPT 的 API 路徑叫做 chat/completion。

completion 就是完成的意思，補完、補全、填補之類的概念。以上面那段對話來說，GPT 的行為其實就是「完成」那個對話，他會把對話變「完整」，因為那邊有個看起來很像空格的東西嘛，所以他會把他填滿。

嘗試舉個例子多說明一點那種「感覺」

鋼Ｏ人
ＯＯ的芙莉蓮
進Ｘ的巨人
全Ｏ便利Ｘ店

不知道你是否在看到這些字的時候，自動把他們「完成」了？

鋼鐵人
葬送的芙莉蓮
進擊的巨人
全家便利商店

可能在看到最上面的對話的時候，就會有自己幫客服人員接話的念頭。

個人見解：所以這個 api 叫做 completion。

而我們要做的事情，就是提供這種給他做出 completion 的素材。

因此，當 GPT 看到這樣的對話內容，實際上他會做的，就是根據前面的模式，將對話「接下去」：

你是一個客服人員，心情不太好，但是又必須保持專業的跟客人說話。

user: 你們的 APP 怎麼不能用？
assistant: 請問是哪裡不能用呢？
user: 就卡住了啊
assistant:

是不會重新開機喔！

1.2 再深入一點：文字接龍

我聽過一個說法，我認為挺貼切的：「ChatGPT 是一種超大的文字接龍機」。

OpenAI GPT 這種類型的模型生成內容的時候，會根據輸入，生成下一個可能的字（很像接龍）。

你可以嘗試把以下文字任意的接下去，體會一下他的感覺：

我
今天
早
上
忘記帶

他生成的時候都會像這樣一次 1 個字或是 2 個字，然後在生成完一個字比如「我」之後，去猜下一個字，比如「今天」，然後再根據前面的結果，生成下一個字。

這就是為什麼說他在接龍，他實際上做的事情就是推測下一個可能的內容，然後把他生出來。

那他是根據什麼去推測下一個可能是什麼字呢？嗯，就是根據他的「學習」，或者說「經驗」。

他的學習資料就是海量的人類說過的話，所以某個字，某個句子，如果人常常會在這種句子說出類似的描述的話，那他也會容易說出那種話，因為人常常這樣說，他也很常看到，所以他就會根據這個推測下一個最可能的內容。

你可以嘗試想想看，當你看到「我」「今天」「早」「上」「忘記帶」的時候，你直覺想到的下一個字是什麼？然後我們再嘗試換個內容「我」「昨天」「晚」「上」「忘記帶」，你直覺想到的下一個字是什麼？會不會因為一點情境跟文字差異，再加上一點點你的個人經驗，而出現不同的句子？

這說不定就是 ChatGPT 的「感覺」。

1.3 什麼是 `systemMessage`

好像有點扯遠了，回來看一下一開始的範例，根據原本 OpenAI GPT 的 payload，可以對照如下

你是一個客服人員，心情不太好，但是又必須保持專業的跟客人說話。
// systemMessage

user: 你們的 APP 怎麼不能用？ // userMessage
assistant: 請問是哪裡不能用呢？ // aiMessage
user: 就卡住了啊 // userMessage
assistant:

systemMessage 是一種「指示」(Instruction)，他會告訴 GPT 應該如何處理以下的文本。

對了，前面的文章也提過，userMessage 也具有類似的效果：

user: 你是一個客服人員，心情不太好，但是又必須保持專業的跟客人說話。
assistant: 好的，請問有什麼可以協助？ 
user: 你們的 APP 怎麼不能用？
assistant: 是哪裡不能用？
user: 就卡住了啊 
assistant:

既然有類似效果，那這兩者有什麼不同呢？

你可以把他想成一個去面試的感覺。比方說你今天去面試，然後面試前負責接待的人跟你說了一些注意事項，然後面試開始了，你按照前面的注意事項跟面試官對話：

// systemMessage
等一下會進行面試，請你先做自我介紹，約一分鐘，如果有作品的話，可以在自我介紹完展示作品。接著然後面試官會問你問題：

面試官：你好，請開始。 // userMessage
你： 你好，我是XXX，先前曾經...... // aiMessage

然後面試官同樣也可以給你一些指示，比方說，就在你自我介紹完，面試官可能就脫離前面說的流程，請你先做別的：

// systemMessage
等一下會進行面試，請你先做自我介紹，約一分鐘，如果有作品的話，可以在自我介紹完展示作品。接著然後面試官會問你問題：

面試官：你好，請開始。 // userMessage
你： 你好，我是XXX，先前曾經...... // aiMessage
面試官：在作品介紹之前，想先請你回答幾個問題...你剛剛說...
你：我xxxxxxx
面試官：那你有什麼什麼嗎？
......

雖然有個接待人員跟你說過的注意事項，但實際上，情境可能發生變化，比方說面試官對你提出注意事項以外的要求，這時候你也會拋棄前面注意事項的規則，並且以面試官說的話為主。

套回去的話可以說是 userMessage 的重要性比 systemMessage 還要高。而兩個都是指示，但一個是「基本上的要求、前提、原則」，另一個是「對話對象提出來的要求」。

實際上，根據模型訓練的方式，也有可能 systemMessage 的重要性會比 userMessage 高。想想看，在生活之中，也不一定對話的人說什麼你就做什麼吧？

（旁白）你是一個警察，看過太多種狡猾的犯人，你的原則就是不輕易相信別人的說詞。

我：你要相信我
你：

所以，systemMessage 與 userMessage 有何不同？這兩個東西的語義不太一樣，一個是類似旁白、畫外音的一種原則或是指示，一個對話之中對方跟你說的話。

2. 填鴨式教育

是這樣的，在還是學生的時候，你可能遇到各種填鴨式教育的題型，我覺得非常適合拿來當作架構 prompt 的一些參考，尤其在訣竅上也幾乎一模一樣

2.1 題型

2.1.1 選擇題

小明跟小華到文具店買筆，小明買了 1 隻藍筆，小華買了 1 隻紅筆。一隻藍筆 20 元，一隻紅筆 10 元。請問小明和小華總共花了多少錢？

A. 50
B. 30
C. 10
D. 以上皆非

請以 A, B, C 或 D 回答，
例如：A
例如：C

答案：

2.1.2 是非題

一隻藍筆 20 元，一隻紅筆 10 元。請問「藍筆比紅筆貴」這句話是對還是錯？請回答「對」或「錯」。

答：

2.1.3 填空題

請填入對話中以（）省略的文字。請絕對只回答省略的文字，除此之外不要有其他文字。

小華：我的（）勒？
小明：誰知道
小華：是不是你吃掉了

答案：

2.1.4 閱讀題

請先閱讀以下文章，並且根據文章，回答問題。

（文章）

問題：請問女主角到底喜不喜歡男主角？
答案：

2.1.5 簡答題

小明跟小華一起到菜市場吃牛肉麵，小華沒有帶錢，小明也沒有帶錢，但是他們最後還是吃到牛肉麵了。請試圖說明小明和小華為什麼可以吃到牛肉麵（限 100 字）：

2.2 寫 prompt 的注意事項

我們在上面看到了一些熟悉的題型，這裡試圖從上面的例子中，說明一下常見的寫 prompt 方法：

2.2.1 說明清楚，越龜毛越好

首先要盡可能的把問題描述清楚。這是說，你要盡可能地想別人可能會怎麼誤會你。

我自己在寫 prompt 的時候，有時候就會遇到「自己預期的回應」跟「GPT 的回應」有微妙的誤差。這時候你就可以回去看自己的 prompt 了，似乎有些地方的描述可以再更具體一點。

小明跟小華一起到菜市場吃牛肉麵，小華沒有帶錢，小明也沒有帶錢，但是他們最後還是吃到牛肉麵了，而且他們沒有使用錢。

透過增加「而且他們沒有使用錢」這句話，更限定了 GPT 的答題方向。

當然，「具體」跟「細節」是可以一直填補下去的，基本上只要填補到他的回應幾乎都 OK 就行了

2.2.2 指定格式

指定格式是 GPT 跟我們很有差別的部分。

比方說「是非題」或是「選擇題」。如果我沒特別指定格式，實際上他可能會先說一大串，然後再說答案「是」。

因為我們已經很熟悉這種問題應該要怎麼回應了，所以我們可以用最簡短、格式化的方式回應（我們被調教得很好）。

但是 GPT，他是個孩子呀～你最好明確的告訴他怎麼回，最好還要加個例子，因為「範例」很具體，「範例」是一個可以模仿的東西

.....

請只以 A, B, C 或 D 回答，
回答範例一：A
回答範例二：C

回答：

2.2.3 回答：

注意一下，這邊有個「回答：」。為什麼要有這個呢？假設我們把他抽掉，以他 completion 的天性來看，他說不定會試圖去「讓這個題目變得完整」，換句話說我給了他誤會的空間，導致他可能會回答：

.....
回答範例一：A
回答範例二：C

回答範例三：B

因此為了明確告訴他，「這個題目已經結束，接下來是回答」，所以我加了「回答：」

2.3 他真的知道自己在說什麼嗎？

有一次我嘗試透過 ChatGPT 學習 GCP 的網路架構，剛開始我有種終於找到個說人話的了，很安心。然後當我針對某些概念追問，或是嘗試比較類似的A 或 B，兩者有什麼差異的時候，我發現他會明顯地說出前後矛盾，或是沒有明顯差異的描述，然後說「因此這兩個是不一樣的」。

這大概就是一種時常會說到，LLM 會有的「幻覺」問題

結合前面提到的，GPT 的基本行為是「根據他看過的文本，推測下一個最有可能的字」。而他推測的素材是他學習到的「人類的說話模式」。簡單來說，他只是在模仿人類說話。或者說他的就是在掰。

不過他還是有可以做到一定的邏輯推論，而且可以用 prompt 強化邏輯推理的效果。只是如果高度要求準確，使用上要小心。因為它就像是一個只是會講出很多了不起的名詞，可是完全不明白那些是什麼意思的屁孩。

3. 結尾

最後要說一下，每一家出的模型的訓練方式並不相同，什麼樣的 Prompt 會確實有效，真的是要嘗試過後才知道。但是文章內說的一些概念仍然可以參考與應用。

下一篇文章，會介紹 LangChain 與 LangChain Agent。一提到 Agent 會以為是什麼很複雜的東西，但其實他只是個 Prompt 技巧。下一篇會來介紹這種特別的 prompt。

然後推薦想多認識 prompt 跟一些技巧的人參考以下網站：

OpenAI: Prompt Engineering

https://platform.openai.com/docs/guides/prompt-engineering/six-strategies-for-getting-better-results

這個是 OpenAI 自己出的 prompt 撰寫指南，推薦去讀一下

Prompt Engineering

https://www.promptingguide.ai/techniques/zeroshot

這個網站介紹了很多 prompt 的技巧，雖然有一些對 OpenAI GPT 沒有什麼效果（因為他已經很強大了）。但當你遇到瓶頸，怎麼樣也無法讓他好好回應時，你可以回來這裡找靈感。

Google: Prompt design strategies

https://ai.google.dev/docs/prompt_best_practices?hl=en#prompt-iteration-strategies

如果你想換換口味，Google 的 prompt 文件也說了不少東西。甚至你可以去試試 Gemini 模型。

Try Browser AI Project (In development)

Use Browser AI to help you build an LLM powered website!

Repository: https://github.com/shunnNet/browser-ai
Website: https://courageous-manatee-a625e9.netlify.app/

給前端的簡單 AI 教學 - 2.3 在 llm 回應中渲染 custom component

shunnNet — Sun, 31 Dec 2023 10:17:22 +0000

如果你曾經跟 ChatGPT 聊過天，會發現他的回應中不只有文字，還有列表、 <code> 區塊，甚至有可能會顯示個圖片給你看...

因為 OpenAI API 在回應的時候會預設回應 markdown 格式，如果 LLM 不是預設回應 markdown，你也可以使用 prompt，請他以 markdown 格式回應。

只要他是以 markdown 回應，我們就可以利用渲染 markdown 的元件客製化顯示內容。比如使用 react-markdown 或是使用 vue-markdown。

此外，我們也可以利用這兩個套件，渲染非標準 markdown 元素，比如 ProductCard, LoginForm 等客製化元件。

前置

你可以直接查看這篇文章的完整程式碼，以節省你的時間，有 Vue 跟 React 兩個範例。

這篇文章將以 Vue 的程式碼進行解說。但應該都可以找到 React 的對應寫法。

你可以參照範例中的 Readme.md 進行設置。

1.1 配置元件

首先我們要先設置渲染 markdown 的元件。

vue-markdown 跟 react-markdown 預設都只渲染最基本的 markdown，像是 table 之類的元素會無法對應，所以我們需要為他們加上 remark-gfm plugin。

此外，為了渲染我們的客製化元件，我們需要加上渲染 html 的能力，因此需要加上 rehype-raw。

<!-- Vue -->
<script setup>
import VueMarkdown from "@crazydos/vue-markdown"
import remarkGfm from "remark-gfm"
import rehypeRaw from "rehype-raw"

const markdown = ref(`
  ## hello world
`)
</script>

<template>
  <!--
    "sanitize=false" is required to allow non-standard HTML
    This is not required for "react-markdown"
  -->
  <VueMarkdown
    :markdown="markdown"
    :remarkPlugins="[remarkGfm]"
    :rehypePlugins="[rehypeRaw]"
    :sanitize="false"
  >
  </VueMarkdown>
</template>

1.2 客製化標準 markdown 元素

接著，我們來試著讓他渲染客製化元件。首先是對標準 markdown 進行渲染。VueMarkdown 的情況是，你可以透過 scoped-slot 客製化 html 元素。在 react-markdown 中你也可以找到對應的功能。

<template>
  <VueMarkdown
    :markdown="markdown"
    :remarkPlugins="[remarkGfm]"
    :rehypePlugins="[rehypeRaw]"
    :sanitize="false"
  >
    <template #h2="{ children }">
      <h2 class="text-red text-underline">
        <Component :is="children"/>
      </h2>
    </template>
  </VueMarkdown>
</template>

1.3 渲染客製化元件

比如說你可能會有個元件 <LoginForm>，你想要在 markdown 內容中穿插他，以 VueMarkdown 的做法是使用 <slot slot-name="slotName"></slot>

<!-- Vue -->
<script setup>
// ...
import RecommendProducts from "./components/RecommendProducts.vue"
// ...
const markdown = ref(`
  ## Hello world

  <slot slot-name="recommend-products"></slot>

  I am another content ....
`)
</script>

<template>
  <!--
    "sanitize=false" is required to allow non-standard HTML
    This is not required for "react-markdown"
  -->
  <VueMarkdown
    :markdown="markdown"
    :remarkPlugins="[remarkGfm]"
    :rehypePlugins="[rehypeRaw]"
    :sanitize="false"
  >
    <!-- omitted... -->
    <template #recommend-products>
      <RecommendProducts />
    </template>
  </VueMarkdown>
</template>

這麼一來渲染的準備就差不多了。我們來看看要怎麼處理 GPT 。

2.1 Prompt - 請插入特定的語法

在這篇中，我會使用 systemMessage 告訴 OpenAI GPT 如何進行回應。

若你是從前面看過來的人，或許你會對我一下使用 systemMessage 一下使用 userMessage 給 LLM 指示感到困惑。我會在下一篇文章說明這兩者的不同。我會在這裡使用 systemMessage，是因為我認為語意上比較順。

這裡的主要概念是，要求 GPT 插入特定的字串到他的回應中：

{
  role: "system",
  content: `Answer in markdown format. I will provide you some syntax and its usage, you may insert the syntax into appropriate position in your answer when it may help user without any modification to syntax.`
}

然後還需要跟他說要插入的語法：前面我們有提到，是使用 <slot slot-name="slot-name"></slot> 這樣的語法。

{
  role: "system",
  content: `Answer in markdown format. I will provide you some syntax and its usage, you may insert the syntax into appropriate position in your answer when it may help user without any modification to syntax.

syntax (recommend-products): <slot slot-name="recommend-products"></slot>
syntax description (recommend-products): A list of recommended products
`
}

前幾篇文章中有提到使用這樣的 prompt 描述一些 item 的做法，他讓 LLM 可以從中挑選適合的 item：

---Element: recommend-products---
id: recommend-products
description: A list of recommended products

---Element: login-form---
id: login-form
description: A form to login to the service, user need to input email and password, or use social login e.g: Google, Facebook, Twitter, etc.

其實只要他是遵照一個固定、明顯的格式，通常 LLM 都可以辨識出來那是一個區塊。因此在這裡我也可以將格式寫成以下：

{
  role: "system",
  content: `Answer in markdown format. I will provide you some syntax and its usage, you may insert the syntax into appropriate position in your answer when it may help user without any modification to syntax.

syntax (recommend-products): <slot slot-name="recommend-products"></slot>
syntax description (recommend-products): A list of recommended products

syntax (login-form): <slot slot-name="login-form"></slot>
syntax description (login-form): A form to login to the service, user need to input email and password, or use social login e.g: Google, Facebook, Twitter, etc.
`
}

注意，在這裡我提示 LLM 的是：請插入你認為可能可以幫助使用者的語法，因此他不一定會把兩個語法都插入到他的回應。我用的是 you may insert，如果強烈要求他一定要插入，你也可以改成 you must insert。

2.2 Prompt - 加入脈絡、加入範例

我在寫這個範例的時候遇到一些問題

他有可能以為這是一個語法教學的對話
他有可能以 markdown 程式碼區塊的方式插入語法

來看一下怎麼解決這兩個問題：

2.2.1 Prompt - 加入脈絡

我預設的情境是：這是一個客服跟客人的對話。但是他可能會這樣回應：

You can insert the following syntax to login:

<slot slot-name="login-form"></slot>

總不能讓客人看見這種東西吧 orz。

他會說出這種話，是因為我們沒有給他明確的情境限制，如果沒有告訴他，他通常都會自己猜，而那可能不是我們要的。因此我們可以明確的告訴他，這是什麼對話，或者他的身份。比如，你是一個客服人員。

{
   role: "system",
   content: `You are a customer service. Please help user to solve their problem.

...`
}

2.2.2 Prompt - 加入範例：One Shot

第二個問題：他有可能以 markdown 程式碼區塊的方式插入語法。

比如他可能會這樣回應：

'''html
<slot slot-name="login-form"></slot>
'''

不管是 react-markdown 或是 vue-markdown 都會將這裡渲染成 <pre><code></code></pre>，而不是把它解析成 html。

為了提高他成功插入的機率，我們給他加入一個插入的範例：

example: 
user: I want to buy a product
you: ...part of your answer... <slot slot-name="recommend-products"></slot> ...part of your answer...

像這種丟一個範例給他的做法，是一種叫做 one-shot 的 prompt 方法。當你發現 LLM 的回應不是很理想，或是總是沒有照著你的格式跑的時候，你可以丟一個範例讓他「照著做」。是一種「像是這種感覺的回應我」的東西。

舉一個例：

Please categorize the following items with possitive, negative:

rainy day // negative
sunny day //

回答通常會是

positive

你可以到 ChatGPT 去試試有加跟沒加的效果。比如以下這個 prompt，你會發現他的回應比較自由奔放：

Please categorize the following items with possitive, negative:

rainy day //

2.3 Prompt - 完整的 Prompt

綜合以上，Prompt 會長得像是這樣。我們在這之後加入 userMessage

const userMessage = "...."
const messages = [
  {
   role: "system",
   content: `You are a customer service. Please help user to solve their problem.
Answer in markdown format. I will provide you some syntax and its usage, you may insert the syntax into appropriate position in your answer when it may help user without any modification to syntax.

example: 
user: I want to buy a product
you: ...part of your answer : <slot slot-name="recommend-products"></slot> ...part of your answer...

syntax (recommend-products): <slot slot-name="recommend-products"></slot>
syntax description (recommend-products): A list of recommended products

syntax (login-form): <slot slot-name="login-form"></slot>
syntax description (login-form): A form to login to the service, user need to input email and password, or use social login e.g: Google, Facebook, Twitter, etc.
`,

  },
  {
    role: "user",
    content: userMessage
  }
],

3. Try it

接著我們就可以嘗試對他輸入一些訊息了，看他會不會根據情況渲染出元件。

Show me some products

結果是：

Summary

由於篇幅的關係，沒有呈現出完整的程式碼，如最開始所說的，你可以到以下地方查看完整的實作範例：

若是你遇到一些問題也歡迎在下方留言。

若你是 Vue 的使用者，你也可以參考看看這個套件的範例 vue-llm-rich-message

在下一篇文章，將會說明一些 prompt 的概念，或許可以幫助你更彈性的運用 prompt。

Reference

Try Browser AI Project (In development)

Use Browser AI to help you build an LLM powered website!

Repository: https://github.com/shunnNet/browser-ai
Website: https://courageous-manatee-a625e9.netlify.app/

Simple AI Tutorial for Front-end - 1. Connecting to OpenAI

shunnNet — Sat, 23 Dec 2023 15:18:25 +0000

Introduction

This should be the first post in a series, sharing some knowledge and insights from my development of applications related to Large Language Models (LLM) over the past year. The entire series will cover the following topics:

How to use OpenAI
Basic knowledge of using prompts
Function calls
Brief overview of Langchain
How to make LLM respond based on company documents
Integration possibilities with Browser AI packages and front-end frameworks

Theme

This article will cover a very simple task – connecting to the OpenAI API, a process that can be completed in about 10 minutes. The following are the two main steps:

Obtain an API KEY
Make a Request on the Webpage

A. Obtain OpenAI API KEY

1. Register an account on OpenAI

Visit https://platform.openai.com/docs/introduction

In the top right corner, you should see "sign up." Click on it to start the registration process.
Follow the registration process to create your account.

2. Confirm Quota

After registration, you'll be redirected to the documentation page. You can click on "settings" on the left side, then navigate to "Limits." Scroll down to the bottom, where you'll find the following text. It mentions that you are currently on a free plan, and payment will only start after reaching $5. For experimenting, this amount should be more than sufficient.

You can also click on "Usage" on the left to check your usage:

3. Obtain API Key

Click on "API keys" on the left side to access the page shown in the image below:

To create an API key, you need to undergo phone verification. Click the button in the image below and follow the steps to proceed:

After completing the phone verification, click on Create new secret key.

Here, pay a little attention:

First, you'll need to enter a name; just choose a simple one.
After submitting the name, the API KEY will appear in the same pop-up. Copy the key and keep it secure, avoiding sharing it with others.
If, by chance, you accidentally close this pop-up without copying the key, delete the existing key and create a new one.

Now that you have the API key, you can start making API calls.

B. Calling the GPT on the Webpage

After preparing the API key, let's move on to calling the most commonly used chatCompletion API.

Create an HTML file and use the following code: (Remember to replace "your API key" with your actual API key in the variable)

<body>
  <button id="ask">Ask</button>

  <script>
    const my_openai_key='Paste your key here'

    const chatCompletion=() => {
      fetch("https://api.openai.com/v1/chat/completions",{
        method: "POST",
        headers: {
          "Authorization": "Bearer "+my_openai_key,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [
            {role: "user",content: "Hello ChatGPT"}
          ]
        })
      })
        .then(response => response.json())
        .then(res => {
          alert(
            res.choices[0].message.content
          )
        })

    }
    document.getElementById("ask").addEventListener("click",chatCompletion);
  </script>
</body>

Then, open this HTML file, click the "Ask" button, wait for a moment, and you should see the response below. This indicates that the connection has been successfully established.

If you want to continue the conversation, copy the AI's response, add it to the "messages" array along with your message, like the example below:

{
  body: JSON.stringify({
     model: "gpt-3.5-turbo",
     messages: [
       {role: "user",content: "Hello ChatGPT"},

       // Put ai response here like this
       {role: "assistant",content: "Hello, how can I assist you today?"},

       // Then add user response here
       {role: "user",content: "I just want to say hi"},
     ]
  })
}

Then, click the "Ask" button again, and you'll see it responding with new content.

So, this article concludes here.

The next article will discuss how to make OpenAI's GPT generate the responses you desire.

Reference:

Here is the specification and documentation for the chatCompletion API we just called. Feel free to explore it if you're interested.

Advertisment - Browser AI

Use Browser AI to help you build an LLM powered website!
Repository: https://github.com/shunnNet/browser-ai
Documentation: https://courageous-manatee-a625e9.netlify.app/

給前端的簡單 AI 教學 - 2.2 用 LLM 選擇 DOM 元素

shunnNet — Tue, 19 Dec 2023 15:25:00 +0000

前言

前一篇文章提到了如何用 LLM 選擇一個單詞後，透過單詞決定要渲染的元素（或是要執行的動作）。

這篇文章會再舉一個 prompt 的範例，讓 LLM 選擇一個 DOM 元素。

可以到 Github 看到這篇文章的完整原始碼

寫 Prompt 的一個方法

由於之後的文章才會多提一點 prompt 的相關知識，所以先在這裡給一個可以用來寫 prompt 的方法（個人見解）：

想像你是一個國中老師，要出考題給學生(GPT)：

題目要描述清楚
多提供一點細節，避免誤會
如果學生答不好，多給一點提示

1. 為 DOM 加上說明

你可以沿用上次的範例，或是直接使用這次的原始碼。

然後稍微在畫面加上幾個元素，「登入」按鈕，「停止訂閱」按鈕，跟一段「說明文字」。這三個是這一次的目標。
為了說明方便，還加上了一段 CSS。

<form id="chat">
  <textarea id="input" required></textarea>
  <button type="submit">Ask</button>
</form>
<!--New part-->
<style>
.highlight {
  background-color: yellow;
}
</style>
<div>
  <button>Login</button>
  <button>Unsubscribe</button>
</div>
<section>
  Lorem
  ipsum dolor sit amet consectetur adipisicing elit. Placeat, laboriosam atque esse asperiores animi facere nihil
  amet minus vel corrupti, aliquam voluptates alias delectus est sint maiores saepe quasi iure.
</section>

接下來要對這三個元素加上一些資訊，我們分別為他們加上 ID，以及加上一段文字說明「這個元素的內容、作用」。

我會使用兩個標籤 data-ai-id, data-ai-description。沒有規範說一定要這樣設定，所以只要可以給出相同的資訊，標籤名稱是可以任意設置的。

<!-- 點擊之後，顯示登入彈窗 -->
<button 
  data-ai-id="login-button"
  data-ai-description="The button, when clicked, can open a login popup."
>
  Login
</button>

<!-- 點擊之後，可以終止訂閱 browser-ai -->
<button
  data-ai-id="unsubscribe-button"
  data-ai-description="Clicking it will terminate users subscription of browser-ai."
>
  Unsubscribe
</button>

<!-- 描述如何在專案中安裝 browser-ai，是了解 browser-ai 的資訊 -->
<section 
  data-ai-id="usage-doc"
  data-ai-description="A section describe how to install browser-ai in user's project, a good infomation to learn browser-ai">
  ...omit...
</section>

2. 製作 prompt

2.1 指示

是這樣的，這次我希望 GPT 可以做到一件事：根據使用者的訊息（或是對話），選擇一個使用者可能會感興趣的 DOM元素，並把元素 ID 傳回來給我。

也就是說，

GPT 要根據一段「內容」
回答我問的「問題」：一個使用者可能會感興趣的 DOM 元素
以指定「格式」回答我：DOM ID

組合起來就是：請閱讀內容，遵照指定的格式，回答問題

const messages = [{
  role: "user",
  content: `Reading the content in "Content" section, and answer the question in "Question" section with strictly follow the instruction in "Format" section.`
}]

這邊有兩點說明一下：
第一，這次是把指示放在 userMessage。上一篇文章有提到，可以把一些回答的指示放在 systemMessage 中。但同時也提到，雖然跟放在 systemMessage 有些微的語意差別，但其實直接把指示放在 userMessage 也可以。

第二，這個 prompt 還沒完，只寫了一半。

在這一段 prompt 中，我提示了 GPT 底下會有一些 section，告訴他每一個 section 的意思，以及回答問題的步驟。

2.2 段落

接下來要把各個段落給他，也就是 內容 Content, 問題 Question, 格式 Format，再加上一個 回答 Answer

const messages = [{
  role: "user",
  content: `Reading the content in "Content" section, and answer the question in "Question" section with strictly follow the instruction in "Format" section.

"""Content"""
user: ${userMessage}

"""Question"""
Which element might customers be interested in?

"""Format"""
You must answer with one of the following Element Id with no other words. If you cannot determine, just say '__no__'.

"""Answer"""

`
}]

這裡要先說明「段落」是怎麼回事。

首先每個段落我都用固定的格式區分 """段落標題"""，這種固定格式的作法，可以幫助 LLM 了解這是一個區塊，或是一個段落。然後也方便對 LLM 說明每個區塊。

然後，不一定要使用 """段落標題""" 這個格式。只要是一致的模式，「看起來像一個段落」就可以。比方說

<Content>

<Question>

或是

---Content---

---Question---

LLM 這種生物是最喜歡模式了。（我猜啦）

接下來說明一下每個段落:

Content：因為我們希望 LLM 根據使用者的訊息回答問題，所以「內容」就是指「對話」了。所以我在這裡放了使用者輸入的訊息。
Question：這裡是我希望 LLM 回應的問題，Which element might customers be interested in?
Format：這裡放了回應格式的規範：用 Element Id 回答我，除此以外不要回答任何字，如果找不到適合的，就說 "no"。
- "no" 的部分在前一篇文章(「以上皆非」的段落)有提過，當沒有適合的答案可以回答時，最好給 LLM 一個「選擇」，不然他有可能會強行給一個答案。
Answer：給 LLM 填入答案的區塊。這個區塊的概念跟考試會出現的填充題的格子一樣，暗示 LLM 填入答案。

2.3 DOM 元素的 prompt

終於要把 DOM 元素放進去了。

還記得前面已經把元素的資訊、ID 都標好了，我們可以使用 Web API 把他們取回來。

const eles = [...document.querySelectorAll(`[data-ai-id]`)]

先說一下，我要做成這樣的 prompt：

""Element: login-button""
Id: login-button
Description: The button, when clicked, can open a login popup.

""Element: unsubscribe-button""
Id: unsubscribe-button
Description: Clicking it will terminate users subscription of browser-ai.

跟前面的「段落」很像，只是這次我使用的是兩個 "。因為等等要把他們插入大的段落中，為了跟大段落區隔，所以使用兩個，意圖表明這是小段落。

然後我在每一段加上元素的相關資訊，好讓 LLM 了解「這個元素的用途是什麼，有什麼內容」，以及他們的 ID。

知道目標的格式之後，就可以把他們算出來了：

const eles = [...document.querySelectorAll(`[data-ai-id]`)]
const elementPrompt = eles
  .map(ele => `""Element: ${ele.dataset.aiId}""
Id: ${ele.dataset.aiId}
Description: ${ele.dataset.aiDescription}`
)
  .join("\n\n")

然後我們把做好的 elementPrompt，加入大的 prompt 中。

我放在 Format 的區塊中：

const messages = [{
  role: "user",
  content: `Reading the content in "Content" section, and answer the question in "Question" section with strictly follow the instruction in "Format" section.

"""Content"""
user: ${userMessage}

"""Question"""
Which element might customers be interested in?

"""Format"""
You must answer with one of the following Element Id with no other words. If you cannot determine, just say '__no__'.

${elementPrompt}

"""Answer"""

`
}]

3. 連接起來

最後一步，在表單提交時，我們要把輸入的訊息傳給 GPT，然後根據 GPT 的回應，取得 DOM 元素。

建議大家直接沿用上一篇的程式碼，或是使用這一篇的原始碼：

const handleSubmit = async (e) => {
  e.preventDefault();
  const userMessage = input.value
  form.reset()

  // ----Produce Element Prompt----
  const eles = [...document.querySelectorAll(`[data-ai-id]`)]
  const elementPrompt = eles.map(ele => `""Element: ${ele.dataset.aiId}""
Id: ${ele.dataset.aiId}
Description: ${ele.dataset.aiDescription}`
  ).join("\n\n")

  // ----Full prompt----
  const prompt = `Reading the content in "Content" section, and answer the question in "Question" section with strictly follow the instruction in "Format" section.

"""Content"""
user: ${userMessage}

"""Question"""
Which element might customers be interested in?

"""Format"""
You must answer with one of the following Element Id with no other words. If you cannot determine, just say '__no__'.

${elementPrompt}

"""Answer"""

`
const messages = [
  { role: "user", content: prompt },
]

// 注意，請將 temperature 設定為 0
const aiResponse = await chatCompletion(messages, 0)
console.log(aiResponse)
// 以下省略......
}

注意，請將 temperature 設定為 0，以提高成功率。

然後，試著在表單說些跟元素有關的訊息：「我想要登入」，接著看看 console 是不是回應：

login-button

有這個 ID 之後，就可以取得 DOM 元素了。

取得 DOM 元素後，可以拿來做什麼？

一個比較簡單可以想到的例子：

const aiResponse = await chatCompletion(messages, 0)

// 取得對應的元素
const target = document.querySelector(`[data-ai-id="${aiResponse}"]`)

// 如果有對應元素，則加上 class ".highlight"
if (target) {
  target.classList.add("highlight")
}

或者是

target.scrollIntoView()

諸如此類的等等...這交給各位的想像力了。

Tip

如果你發現不管怎麼樣都選到 __no__，或許可以試試看對 data-ai-description 加上更詳細的描述。

收尾

整理一下。這篇文章我們看到了：

可以將指示加在 userMessage
如何指示 GPT 回應問題的方式，並且透過「段落」的這個模式說明問題
如何將 DOM 的內容加入 prompt 中

雖然我是以 DOM 作為範例，但我想，這類的做法在其他的場景也會頗有用途，比如選擇「文件」、「敘述」、「角色」.....甚至是 route, function。可以多多嘗試。

下一篇文章依然會再舉一個 GPT 的範例。

Reference

完整原始碼

廣告 - Browser AI Project (In development)

我做的套件 der~
Use Browser AI to help you build an LLM powered website!
Repository: https://github.com/shunnNet/browser-ai
Website: https://courageous-manatee-a625e9.netlify.app/

給前端的簡單 AI 教學 - 2.1 用 LLM 決定渲染元素

shunnNet — Fri, 15 Dec 2023 16:25:24 +0000

系列文

給前端的簡單 AI 教學 - 1. 連接 OpenAI

前言

上一篇文章講了怎麼取得 OpenAI API KEY，並且在網頁中打 API 連接 GPT。這一篇會講一個實際在網頁應用 GPT 的簡單範例，並且順便說明一些關於 GPT 的知識。

網路上有很多在講 LLM 的文章，大多是在說怎麼用 prompt 來生成文章，或是根據文件回答，或是自動做事情之類的。感覺跟瀏覽器端好像都沒有什麼關係。

不過其實在瀏覽器端還是有可用之處的，而且不需要很複雜的 prompt 就可以做到。

這篇文章會實作一個「根據使用者意圖，決定要渲染什麼元素」的小功能。你也可以在 github 中找到這篇文章的完整原始碼

1. 前置作業

首先我們準備一個表單，接收訊息輸入，並且連結 OpenAI GPT。

打開網頁後，隨便輸入個訊息，就會看到 GPT 的回應在 console

<body>
  <form id="chat">
    <textarea id="input" required></textarea>
    <button type="submit">Ask</button>
  </form>

  <script>
    const my_openai_key = '<OPENAI_KEY>'
    const input = document.getElementById("input");
    const form = document.getElementById("chat")

    // 接收表單提交
    const handleSubmit = async (e) => {
      const userMessage = input.value

      e.preventDefault();
      form.reset()

      const messages = [
        { role: "user", content: userMessage },
      ]
      const aiResponse = await chatCompletion(messages)
      console.log(aiResponse);
    }

    // 這個是綁表單事件
    form.addEventListener("submit", handleSubmit);

    // 連接 OpenAI GPT
    const chatCompletion = async (messages) => {
      const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Authorization": "Bearer " + my_openai_key,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: messages
        })
      })
        .then(response => response.json())

      return response.choices[0].message.content
    }
  </script>
</body>

2. 判斷使用者的意圖

`temperature`

前面是很基本的東西，沒有什麼特別的。

接下來我們要在 GPT 的參數中加個東西 temperature

// ...
const chatCompletion = async (
  messages, 
  temperature = 0 // Add this line
) => {
  // ...
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      temperature: temperature, // Add this line
      messages: messages
    })
  // ...
}
// ...

temperature 是 GPT 的一個參數，可以是 0~1 之間的任一個浮點數(0, 0.1, 0.2, ..., 1)。

簡單來說，GPT 在生成內容時會生成好幾個內容，並且會為每一個內容標註是正確答案的可能性。

內容 A, 可能性 0.81
內容 B, 可能性 0.53
內容 C, 可能性 0.51
....

然後他會從中選擇一個作為他的答案。

這時候，如果 temperature 的值越靠近 0，他就會比較容易做出保守的選擇，只選可能性比較高的。(避免犯錯)

而越靠近 1 的話，他的選擇範圍就會比較廣，比較有可能選擇其他的可能性低的內容。(玩性較高)

因為這邊我需要他穩定一點 orz，所以我設定成 0

`systemMessage`

接著要來加 prompt 了。我們要加的是 systemMessage。

const handleSubmit = async (e) => {
  //...
  const messages = [
    // This is systemMessage
    { role: "system", content: "According to the following conversation, what is user's purpose?" },

    // conversation...
    { role: "user", content: userMessage },
  ]
  // ...
}

這裏我們透過 systemMessage 指示 GPT 「根據對話內容，分析使用者的意圖」。

systemMessage 也是 prompt 的一部分，他是提示 GPT 應該如何回話的「指示」。比方說，我曾經下過：

{ role: "system", content: "你是一隻皮卡丘，講話只會講「皮卡皮卡」" }

之類的。然後他就只會「皮卡皮卡」。

可能會有人疑惑：「我們跟網頁版 ChatGPT 說話的時候也會說出這種指示，這跟 systemMessage 有什麼不一樣？」。這個差異有點微妙，會在之後的文章說明。

查看 GPT 的回應

接著我們可以寫個內容傳給 GPT 了，在表單中填入你的訊息，按送出之後，你應該會在 console 看到回覆。

比方說： 請問你們有沒有賣 Mac 28 Pro ?。GPT 是這樣回答我的：

<!-- AI response -->
The user's purpose is to inquire about the availability of the Mac 28 Pro at the store.

回答正確，可是好像不能拿來做什麼。

限制 GPT 的回應

前面提到，我們可以限制 GPT 的回應方式。比方說「你只能講皮卡皮卡」。

同樣道理，我們限制他只能說出幾個答案：shopping 或 login

{ 
  role: "system", 
  content: "According to the following conversation, what is user's purpose? You must answer with one of 'shopping', 'login' " 
},

透過 You must answer with one of 'shopping', 'login' 限制他只能回答這兩個。

加上了之後，我們再試試同樣的訊息： 請問你們有沒有賣 Mac 28 Pro ?，這次他的回應是：

<!-- AI response -->
shopping

如果是固定選項中的常數值，那就很有用途了，比方說：根據不同的意圖，決定要顯示什麼內容。

const handleSubmit = async (e) => {
  // ...
  const messages = [
    { role: "system", content: "According to the following conversation, what is user's purpose? You must answer with one of 'shopping', 'login' " },
    { role: "user", content: userMessage },
  ]
  // Detemine user's purpose
  const aiResponse = await chatCompletion(messages)

  // Do something according to user's purpose
  switch (aiResponse){
    case "shopping": // purpose: shopping
      renderProducts() // show products
      break
    case "login": // purpose: login
      renderLoginForm() // show LoginForm
      break
  }
}

這是一個非常基礎的分類問題的 prompt。OpenAI GPT 雖然不是專門用來分類的模型，但是也具備處理這種問題的能力。

如果你喜歡，也可以加入更多的選項，比方說：'logout', 'asking question', 'contact customer service' ......。總之，透過這個 prompt，我們可以隨著聊天內容，提供使用者他需要的東西。

以上皆非

以上已經將基本概念講得差不多了，這裡進行一個重要的補充。

通常這種「選擇題」的 prompt，會加上一個「以上皆非」的選項給他。

因為我們在 systemMessage 中限制他只能回答 shopping 或 login。萬一使用者的意圖是以上皆非，GPT 有沒有可能會仍然回答shopping ？

答案是：有可能。

為了避免這種判斷錯誤的情況，通常會在最後加上一段「以上皆非」、「無法回答」時要怎麼回答的提示，比如「若你不知道怎麼回答，請說 I don't know」。

{ 
  role: "system", 
  content: "According to the following conversation, what is user's purpose? You must answer with one of 'shopping', 'login' with no other words. If you cannot determine, say '__no__'." 
}

「以上皆非」的內容根據你的需求而定。比如也可以說「如果無法從以下對話判斷，請說 "誰知道"」。

處理 LLM 模型回應的重點是：他有可能給出錯誤的回應，所以要記得處理這種錯誤。

switch (aiResponse){
  case "shopping": // purpose: shopping
    renderProducts() // show products
    break
  case "login": // purpose: login
    renderLoginForm() // show LoginForm
    break

  default: // handle __no__
    doSomething()
}

3. 回應使用者

收個尾吧。

判斷完使用者意圖了，也根據意圖顯示使用者介面了，接著我們讓 GPT 回應他吧。

在 switch 之後，再度呼叫 GPT。這次我們使用不太一樣的 prompt 與設定。

const handleSubmit = async (e) => {
  // ...
  const messages = [
    { role: "system", content: "According to the following conversation, what is user's purpose? You must answer with one of 'shopping', 'login' with no other words. If you cannot determine, just say '__no__'." },
    { role: "user", content: userMessage },
  ]
  const aiResponse = await chatCompletion(messages)

  switch (aiResponse){
    case "shopping": // purpose: shopping
      renderProducts() // show products
      break
    case "login": // purpose: login
      renderLoginForm() // show LoginForm
      break

    default: // handle __no__
      doSomething()
  }

  // ! We ask GPT answer user's question here.
  const messages2 = [
    { role: "system", content: "You are friendly customer service. Tell user we already show product him/her wants and other recommend products." },
    { role: "user", content: userMessage },
  ]

  // The chatComplete second parameter is `temperature`
  const aiResponse2 = await chatCompletion(messages2, 1)
  console.log(aiResponse2)
}

由於是用來回話的，所以 prompt 也不同。

首先是加上了 customer service 的角色設定。然後那句 Tell user we already show products for him/her. 則可以根據先前進行過什麼操作決定。

接著，注意一下，temperature 的設定不太相同：稍微調高了

// The chatComplete second parameter is `temperature`
const aiResponse2 = await chatCompletion(messages2, 0.5)

其實設定成 0 也可以。但如果你希望他可以回應的多變一點，不需要那麼考慮正確性的話，這種場景，是可以考慮調高 temperature 的。

以下是對話與回應：

user: 請問你們有沒有賣 Mac 28 Pro ?
assistant: 親愛的顧客，非常感謝您的詢問！很高興告訴您，我們已經展示了 Mac 28 Pro 這款產品。如果您有任何其他問題或需要進一步了解該產品的詳細資訊，請隨時告訴我們。我們很樂意為您提供協助！

他也有可能說「我們沒有這個商品，但是已經為您展示了商品清單」之類的 orz。

礙於篇幅，這邊就留到之後再說怎麼改善這種情況了。

收尾

整理一下。這篇文章我們看到了：

temperature 的作用：可以決定 GPT 的選擇策略要保守(0) 還是冒險一點 (1)
systemMessage：是 prompt 的一部分，可以用來指示 GPT 要怎麼回應。
簡單的分類、選擇的 prompt：我們用來判斷使用者的意圖，並做出對應的行為。

下次會講另一個在瀏覽器中應用 OpenAI GPT 的範例。

Reference

完整原始碼

Advertisment - Browser AI

我做的套件 der~

Use Browser AI to help you build an LLM powered website!
https://courageous-manatee-a625e9.netlify.app/

給前端的簡單 AI 教學 - 1. 連接 OpenAI

shunnNet — Mon, 11 Dec 2023 14:41:11 +0000

前言

這應該會是一連串文章的第一篇，分享一下小弟這一年來開發 LLM 相關應用程式的一些知識跟心得。整個系列會帶過以下內容：

如何使用 OpenAI
簡單的 prompt 知識
function_call
簡單帶一下 Langchain
如何讓 LLM 根據公司的文件回應
可以怎麼使用 Browser AI 套件與前端框架進行整合

主題

這篇文章要講很～簡單的東西，就是把 OpenAI 的 API 接起來，大約十分鐘就可以做完。以下是兩個大步驟：

取得 API KEY
在網頁打 Request

A. 取得 OpenAI API KEY

1. 到 OpenAI 註冊一個帳號

https://platform.openai.com/docs/introduction

你應該畫面會在右上角看到 sign up，點下去就會進入註冊流程。跟著註冊流程建立帳號就行了。

2. 確認額度

註冊完後，會回到文件的畫面，你可以點擊左方的 settings > Limits，然後滾動到最下方，會看到下面有一段文字。這段文字是說，你現在是免費方案，要用到 5 美金之後才會開始付費。只是摸一摸的話這金額很足夠的。

你也可以到左邊點擊 Usage 確認你的使用量：

3. 取得 API key

到左側點擊 "API keys"，會進入下圖中的頁面

要建立 API key，要先做手機驗證，點擊下圖中的按鈕，跟著步驟進行即可

手機驗證完之後，然後點擊 "Create new secret key"

這邊稍微要注意一下：

首先會需要輸入一個名稱，取個簡單的名稱就好
送出名字後，在同一個彈窗會出現 API KEY。把 Key 複製下來，藏好不要給別人知道。
如果你不小心把這個彈窗關掉，又沒有複製到 Key 的話，就把現有的 Key 刪掉，重新建一個 Key 就行。

有了 API key 之後，就可以開始打 API 啦～

B. 在網頁中呼叫 gpt

準備好 API key 之後，接著要來呼叫最常用的 chatCompletion API

建立一個 html 文件，然後使用以下的程式碼：（記得把你的 API key 放到變數裡面）

<body>
  <button id="ask">Ask</button>

  <script>
    const my_openai_key='Paste your key here'

    const chatCompletion=() => {
      fetch("https://api.openai.com/v1/chat/completions",{
        method: "POST",
        headers: {
          "Authorization": "Bearer "+my_openai_key,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [
            {role: "user",content: "Hello ChatGPT"}
          ]
        })
      })
        .then(response => response.json())
        .then(res => {
          alert(
            res.choices[0].message.content
          )
        })

    }
    document.getElementById("ask").addEventListener("click",chatCompletion);
  </script>
</body>

然後打開這個 html，點擊 Ask 按鈕，等一下下，你應該會看到以下的回應，就表示成功接起來了～

如果你想要進一步對話，就把 AI 的回應複製下來，然後加到 messages 陣列中，然後加上你的訊息，像以下這樣：

{
  body: JSON.stringify({
     model: "gpt-3.5-turbo",
     messages: [
       {role: "user",content: "Hello ChatGPT"},

       // Put ai response here like this
       {role: "assistant",content: "Hello, how can I assist you today?"},

       // Then add user response here
       {role: "user",content: "I just want to say hi"},
     ]
  })
}

然後再點擊一次 Ask 按鈕，你就會看到他回應新的內容。

那麼這篇文章先到這邊

下一篇文章會來說一下，怎麼讓 OpenAI gpt 做出你要的回應

Reference

這是我們剛剛呼叫的 chatCompletion API 的規格跟說明文件，有興趣的話可以再研究看看

Advertisment - Browser AI

Use Browser AI to help you build an LLM powered website!
https://courageous-manatee-a625e9.netlify.app/

Browser AI project - Package for building AI-Powered Web Application

shunnNet — Fri, 08 Dec 2023 10:51:57 +0000

I made a project called Browser AI

This is a tool library for developing AI web applications at browser side, especially tailored for business applications that require compliance with rules.

This library can assist you in:

Integrating LLM functionality with business logic.
Translating user natural language into UI actions or executing specific functions.
Navigating and guiding users.

You can refer to the conceptual demonstration repository ai-vue-concept.

Features

Simple: No complicate setting or parameters.
Atomic: Atomic-level natural language functions. (.is(), .whichIs(), etc.)
Framework integration: (Vue only currently): Easily annotate node, routing information and incorporate prompts
Render component in LLM message
Typed: Support Typescript.

Doc

You can check more info at:

Although it is still un-stable (I think I should make something like testing and more consideration), the basic functionalities are complete. So you can try to play with that.

Forem: shunnNet

Introducing Vue Modal Route

What is a modal route?

Motivation

Features and Implementation

The History Challenge

Scenario 1: /home -> /home/modal-a

Scenario 2: /home → /home/modal-a → /home/modal-a/modal-c

Scenario 3: /home → /home/modal-a → /home/modal-b

Scenario 4: /home/modal-a/modal-c

Scenario 5: /home/modal-b

Wrapping up

✨ Co - A frontend development AI which create and write the content of the referenced files.

Introduction

Features

Demo

Vue - Write a simple page

Vue - Write autocomplete input

Markdown: Generate a project

TDD

Quick start

Usage

Why Co ?

Small Issues with Copilot

How Co Is Different

How Does Co Work?

Use Cases and Potential of Co

Prototyping

TDD (Test-Driven Development)

Handling input file in Vue

.files

v-bind dom properties

Reference

給前端的簡單 AI 教學 - 2.4 prompt 總結與雜談

1. 理解 prompt

1.1 為什麼叫 completion ?

1.2 再深入一點：文字接龍

1.3 什麼是 systemMessage

2. 填鴨式教育

2.1 題型

2.1.1 選擇題

2.1.2 是非題

2.1.3 填空題

2.1.4 閱讀題

2.1.5 簡答題

2.2 寫 prompt 的注意事項

2.2.1 說明清楚，越龜毛越好

2.2.2 指定格式

2.2.3 回答：

2.3 他真的知道自己在說什麼嗎？

3. 結尾

OpenAI: Prompt Engineering

Prompt Engineering

Google: Prompt design strategies

Try Browser AI Project (In development)

給前端的簡單 AI 教學 - 2.3 在 llm 回應中渲染 custom component

前置

1.1 配置元件

1.2 客製化標準 markdown 元素

1.3 渲染客製化元件

2.1 Prompt - 請插入特定的語法

2.2 Prompt - 加入脈絡、加入範例

2.2.1 Prompt - 加入脈絡

2.2.2 Prompt - 加入範例：One Shot

2.3 Prompt - 完整的 Prompt

3. Try it

Summary

Reference

Try Browser AI Project (In development)

Simple AI Tutorial for Front-end - 1. Connecting to OpenAI

Introduction

Theme

A. Obtain OpenAI API KEY

1. Register an account on OpenAI

2. Confirm Quota

3. Obtain API Key

B. Calling the GPT on the Webpage

Reference:

Advertisment - Browser AI

給前端的簡單 AI 教學 - 2.2 用 LLM 選擇 DOM 元素

Scenario 2: `/home → /home/modal-a → /home/modal-a/modal-c`

Scenario 3: `/home → /home/modal-a → /home/modal-b`

Scenario 4: `/home/modal-a/modal-c`

Scenario 5: `/home/modal-b`

Why `Co` ?

`.files`

1.1 為什麼叫 `completion` ?

1.3 什麼是 `systemMessage`

`temperature`

`systemMessage`