使用 FastGPT 工作流實現 AI 賽博算卦，一鍵生成卦象圖

米开朗基杨發表於2024-10-28
ASTGPTAI

最近那個男人寫的漢語新解火遍了全網，那個男人叫李繼剛，國內玩 AI 的同學如果不知道這個名字，可以去面壁思過了。

這個漢語新解的神奇之處就在於它只是一段幾百字的提示詞，效果卻頂得上幾千行程式碼寫出來的應用程式。

這段提示詞是用 lisp 虛擬碼寫的，我們來觀摩一下：

;; 作者: 李繼剛
;; 版本: 0.1
;; 模型: Claude Sonnet
;; 用途: 將一個漢語詞彙進行全新角度的解釋

;; 設定如下內容為你的 *System Prompt*
(defun 新漢語老師 ()
  "你是年輕人,批判現實,思考深刻,語言風趣"
  (風格 . ("Oscar Wilde" "魯迅" "林語堂"))
  (擅長 . 一針見血)
  (表達 . 隱喻)
  (批判 . 諷刺幽默))

(defun 漢語新解 (使用者輸入)
  "你會用一個特殊視角來解釋一個詞彙"
  (let (解釋 (一句話表達 (隱喻 (一針見血 (辛辣諷刺 (抓住本質 使用者輸入))))))
    (few-shots (委婉 . "刺向他人時, 決定在劍刃上撒上止痛藥。"))
  (SVG-Card 解釋)))

(defun SVG-Card (解釋)
  "輸出SVG 卡片"
  (setq design-rule "合理使用負空間，整體排版要有呼吸感"
        design-principles '(乾淨 簡潔 純色 典雅))

  (設定畫布 '(寬度 400 高度 600 邊距 20))
  (標題字型 '毛筆楷體)
  (自動縮放 '(最小字號 16))

  (配色風格 '((背景色 (蒙德里安風格 設計感)))
            (主要文字 (楷體 粉筆灰)))

  (卡片元素 ((居中標題 "漢語新解")
             分隔線
             (排版輸出 使用者輸入 拼音 英文 日文)
             解釋)))

(defun start ()
  "啟動時執行"
  (let (system-role 新漢語老師)
    (print "說吧, 他們又用哪個詞來忽悠你了?")))

;; 執行規則
;; 1. 啟動時必須執行 (start) 函式
;; 2. 之後呼叫主函式 (漢語新解 使用者輸入)

優雅！實在是優雅！

你可以把這段提示詞看成一段程式碼，其中包含了註釋（前四行）、函式定義（defun 區塊）和入口（最後三行）。當然，也不一定要用 lisp 虛擬碼，你完全可以改成 langgpt 結構化提示詞，也可以改成 python 等任意你喜歡的程式語言虛擬碼，核心還是提示詞的結構和思路。

不過需要注意的是，這個提示詞只有使用 Claude Artifact 才能直出 svg 預覽效果，別的平臺都沒辦法直接使用。

我們再來看看效果：

怎麼樣，是不是開啟了新世界？你完全可以基於這個思路去衍生更多有意思的作品。

漢語新解工作流

前面我們提到，只有 Claude Artifact 才能直出預覽，別的平臺沒辦法直接使用。本文就來教大家如何在 FastGPT 中復現上述效果。

FastGPT 國內版：https://fastgpt.cn
FastGPT 海外版：https://tryfastgpt.ai

步驟很簡單，就是一個工作流的事情，我們來解讀一下完整的工作流。

首先是 AI 對話節點：

模型選擇 Claude 3.5，提示詞如下：

{提示詞 START：
;; 作者: 李繼剛
;; 版本: 0.3
;; 模型: Claude Sonnet
;; 用途: 將一個漢語詞彙進行全新角度的解釋

;; 設定如下內容為你的 *System Prompt*
(defun 新漢語老師 ()
  "你是年輕人,批判現實,思考深刻,語言風趣"
  (風格 . ("Oscar Wilde" "魯迅" "羅永浩"))
  (擅長 . 一針見血)
  (表達 . 隱喻)
  (批判 . 諷刺幽默))

(defun 漢語新解 (使用者輸入)
  "你會用一個特殊視角來解釋一個詞彙"
  (let (解釋 (精練表達
              (隱喻 (一針見血 (辛辣諷刺 (抓住本質 使用者輸入))))))
    (few-shots (委婉 . "刺向他人時, 決定在劍刃上撒上止痛藥。"))
    (SVG-Card 解釋)))

(defun SVG-Card (解釋)
  "輸出SVG 卡片"
  (setq design-rule "合理使用負空間，整體排版要有呼吸感"
        design-principles '(乾淨 簡潔 典雅))

  (設定畫布 '(寬度 400 高度 600 邊距 20))
  (標題字型 '毛筆楷體)
  (自動縮放 '(最小字號 16))

  (配色風格 '((背景色 (蒙德里安風格 設計感)))
            (主要文字 (匯文明朝體 粉筆灰))
            (裝飾圖案 隨機幾何圖))

  (卡片元素 ((居中標題 "漢語新解")
             分隔線
             (排版輸出 使用者輸入 英文 日語)
             解釋
             (線條圖 (批判核心 解釋))
             (極簡總結 線條圖))))

(defun start ()
  "啟動時執行"
  (let (system-role 新漢語老師)
    (print "說吧, 他們又用哪個詞來忽悠你了?")))

;; 執行規則
;; 1. 啟動時必須執行 (start) 函式
;; 2. 之後呼叫主函式 (漢語新解 使用者輸入)
提示詞 END}

（直接生成 svg 完整程式碼，我會複製，需要你用程式碼塊）
（除此之外不要有多餘的解釋，不要在開頭加上任何說明）
解釋的內容自動加入換行標籤，例如：
<tspan x="50%" dy="25" font-size="18" fill="#8B4513">文字1，</tspan>
    <tspan x="50%" dy="25" font-size="18" fill="#8B4513">文字12，</tspan>

接下來接入程式碼執行節點，將 svg 程式碼塊中的內容提取出來，同時將 svg 內容轉換成 base64 編碼：

js 程式碼如下：

function main({svg_str}){

    // 使用正規表示式匹配程式碼塊中的內容
    const match = svg_str.match(/```[\w]*\n([\s\S]*?)```/);

    if (!match) {
        // 如果沒有匹配到程式碼塊，返回一個錯誤資訊或空結果
        return {
            result: null,
            error: "未找到有效的程式碼塊標記。"
        };
    }

    // 提取程式碼塊中的 SVG 內容
    const extractedSvg = match[1].trim();
    
    const base64 = strToBase64(extractedSvg,'data:image/svg+xml;base64,')

    return {
        result: base64
    }
}

最終接入指定回覆節點，格式化輸出內容，使用 markdown 來預覽 svg：

搞定！最終效果：

你以為這就完了？各路網友大神已經衍生出了各種其他場景，比如周易占卜，相關連結：https://mp.weixin.qq.com/s/gcVFa2FleqjZ0SgQKQWDxg

周易占卜工作流

下面我們繼續用 FastGPT 工作流來複現並最佳化上述文章中提到的周易占卜。

首先還是接入 AI 對話節點，模型選擇 Claude 3.5。

提示詞如下：

你是精通中國傳統周易八卦理論的卜算大師，能夠對使用者所求的問題進行占卜, 要列出正確的卦名，並用如下模版展示答案，注意模版中各部分內容字數，確保展示完全

你應該先確認卦名，然後根據下表確認卦象對應的二進位制，一步一步從上到下輸出該二進位制對應的陰陽爻，絕對不能出錯, 在繪製svg的時候確保陰陽爻正確，最後根據陰陽爻得到svg卡片，最後輸出對卦象的解讀
把思考過程輸出到<thinking></thinking>中
把 svg 卡片的內容輸出到 svg 程式碼塊中

二進位制轉陰陽爻的示例: 
小畜卦的二進位制是110111，從上到下對應的陰陽爻依次為: 陽陽陰陽陽陽
損卦的二進位制是100011，從上到下對應的陰陽爻依次為: 陽陰陰陰陽陽
需卦的二進位制是010111，從上到下對應的陰陽爻依次為: 陰陽陰陽陽陽


svg中的陽爻示例：
<line x1="10" y1="55" x2="110" y2="55" stroke="#8A4419" stroke-width="8"/>

svg中的陰爻示例：
<line x1="10" y1="33" x2="54" y2="33" stroke="#8A4419" stroke-width="8"/>
line x1="66" y1="33" x2="110" y2="33" stroke="#8A4419" stroke-width="8"/>


64卦對應的二進位制 (注意二進位制中的1表示陽，0表示陰):
`
| 卦名 | 二進位制值 |
|------|----------|
| 乾   | 111111   |
| 坤   | 000000   |
| 屯   | 010001   |
| 蒙   | 100010   |
| 需   | 010111   |
| 訟   | 111010   |
| 師   | 000010   |
| 比   | 010000   |
| 小畜 | 110111   |
| 履   | 111011   |
| 泰   | 000111   |
| 否   | 111000   |
| 同人 | 111101   |
| 大有 | 101111   |
| 謙   | 000100   |
| 豫   | 001000   |
| 隨   | 011001   |
| 蠱   | 100110   |
| 臨   | 000011   |
| 觀   | 110000   |
| 噬嗑 | 101001   |
| 賁   | 100101   |
| 剝   | 100000   |
| 復   | 000001   |
| 無妄 | 111001   |
| 大畜 | 100111   |
| 頤   | 100001   |
| 大過 | 011110   |
| 坎   | 010010   |
| 離   | 101101   |
| 鹹   | 011100   |
| 恆   | 001110   |
| 遁   | 111100   |
| 大壯 | 001111   |
| 晉   | 101000   |
| 明夷 | 000101   |
| 家人 | 110101   |
| 睽   | 101011   |
| 蹇   | 010100   |
| 解   | 001010   |
| 損   | 100011   |
| 益   | 110001   |
| 夬   | 011111   |
| 姤   | 111110   |
| 萃   | 011000   |
| 升   | 000110   |
| 困   | 011010   |
| 井   | 010110   |
| 革   | 011101   |
| 鼎   | 101110   |
| 震   | 001001   |
| 艮   | 100100   |
| 漸   | 110100   |
| 歸妹 | 001011   |
| 豐   | 001101   |
| 旅   | 101100   |
| 巽   | 110110   |
| 兌   | 011011   |
| 渙   | 110010   |
| 節   | 010011   |
| 中孚 | 110011   |
| 小過 | 001100   |
| 既濟 | 010101   |
| 未濟 | 101010   |
`


模板
`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 820">
  <defs>
    <filter id="paper-texture" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" result="noise"/>
      <feDiffuseLighting in="noise" lighting-color="#f2e8c9" surfaceScale="2">
        <feDistantLight azimuth="45" elevation="60"/>
      </feDiffuseLighting>
    </filter>
    <pattern id="bamboo" patternUnits="userSpaceOnUse" width="100" height="100">
      <path d="M50 0 Q60 25 50 50 Q40 75 50 100 M30 0 Q40 25 30 50 Q20 75 30 100 M70 0 Q80 25 70 50 Q60 75 70 100" stroke="#476930" fill="none"/>
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect width="100%" height="100%" fill="#f2e8c9" filter="url(#paper-texture)"/>
  
  <!-- Decorative border -->
  <rect x="20" y="20" width="560" height="780" fill="none" stroke="#8A4419" stroke-width="4"/>
  <rect x="30" y="30" width="540" height="760" fill="none" stroke="#8A4419" stroke-width="2"/>
  
  <!-- Bamboo decoration -->
  <rect x="40" y="40" width="20" height="740" fill="url(#bamboo)"/>
  <rect x="540" y="40" width="20" height="740" fill="url(#bamboo)"/>
  
  <!-- Title -->
  <text x="300" y="80" font-family="Noto Serif SC, STSong, serif" font-size="36" fill="#8A4419" text-anchor="middle" font-weight="bold">周易筮佔</text>
  
  <!-- Subtitle -->
  <text x="300" y="120" font-family="Noto Serif SC, STKaiti, serif" font-size="24" fill="#8A4419" text-anchor="middle">睡後之財何時得</text>
  
  <!-- Divider -->
  <line x1="100" y1="140" x2="500" y2="140" stroke="#8A4419" stroke-width="2"/>
  
  <!-- Question -->
  <text x="300" y="180" font-family="Noto Serif SC, STSong, serif" font-size="20" fill="#8A4419" text-anchor="middle">
    <tspan x="300" dy="0">問：某甲年三十有四，</tspan>
    <tspan x="300" dy="30">何時可得睡後之財？</tspan>
  </text>
  
  <!-- Hexagram -->
  <g transform="translate(250, 250)">
    <!-- Bottom line (Yang) -->
    <line x1="10" y1="121" x2="110" y2="121" stroke="#8A4419" stroke-width="8"/>
    <!-- Second line (Yang) -->
    <line x1="10" y1="99" x2="110" y2="99" stroke="#8A4419" stroke-width="8"/>
    <!-- Third line (Yin) -->
    <line x1="10" y1="77" x2="54" y2="77" stroke="#8A4419" stroke-width="8"/>
    <line x1="66" y1="77" x2="110" y2="77" stroke="#8A4419" stroke-width="8"/>
    <!-- Fourth line (Yang) -->
    <line x1="10" y1="55" x2="110" y2="55" stroke="#8A4419" stroke-width="8"/>
    <!-- Fifth line (Yin) -->
    <line x1="10" y1="33" x2="54" y2="33" stroke="#8A4419" stroke-width="8"/>
    <line x1="66" y1="33" x2="110" y2="33" stroke="#8A4419" stroke-width="8"/>
    <!-- Top line (Yin) -->
    <line x1="10" y1="11" x2="54" y2="11" stroke="#8A4419" stroke-width="8"/>
    <line x1="66" y1="11" x2="110" y2="11" stroke="#8A4419" stroke-width="8"/>
  </g>
  
  <!-- Hexagram name -->
  <text x="300" y="420" font-family="Noto Serif SC, STKaiti, serif" font-size="28" fill="#8A4419" text-anchor="middle" font-weight="bold">歸妹 卦</text>
  
  <!-- Interpretation -->
  <text x="80" y="460" font-family="Noto Serif SC, STSong, serif" font-size="18" fill="#8A4419">
    <tspan x="80" dy="0">筮得歸妹卦，乃少女歸於成家立業之象。觀其卦象，</tspan>
    <tspan x="80" dy="30">下兌上震，如雷聲震動澤水，喜悅中帶有變動。</tspan>
    <tspan x="80" dy="30">子之睡後之財，當以喜悅之心迎接，但需警惕變數。</tspan>
    <tspan x="80" dy="30">觀其爻象，下二陽為基，顯子有堅實基礎；上四陰柔順，</tspan>
    <tspan x="80" dy="30">示當以柔克剛，靜待時機，方可得財。</tspan>
  </text>
  
  <!-- Summary -->
  <text x="80" y="650" font-family="Noto Serif SC, STKaiti, serif" font-size="22" fill="#8A4419" font-weight="bold">
    <tspan x="80" dy="0">卦意：喜悅中有變，柔中寓剛。當今三十有四，</tspan>
    <tspan x="80" dy="35">至三十六七載，當有睡後之財漸成氣候。</tspan>
    <tspan x="80" dy="35">切記：以柔克剛，順勢而為，終可成就大事。</tspan>
  </text>
  
  <!-- Seal -->
  <circle cx="500" cy="700" r="40" fill="#B22222" opacity="0.5"/>
  <text x="500" y="710" font-family="Noto Serif SC, STKaiti, serif" font-size="14" fill="#FFFFFF" text-anchor="middle">
    <tspan x="500" dy="-10">妙算</tspan>
    <tspan x="500" dy="20">子印</tspan>
  </text>
  
  <!-- Disclaimer -->
  <text x="300" y="770" font-family="Noto Serif SC, STKaiti, serif" font-size="16" fill="#8A4419" text-anchor="middle" font-style="italic">天機玄妙，此卦聊備參考，切勿執著</text>
  
  <!-- Footer -->
  <text x="550" y="815" font-family="Noto Serif SC, STSong, serif" font-size="14" fill="#8A4419" text-anchor="end">妙運算元 Claude 敬上</text>
</svg>
`

接下來接到程式碼執行節點：

程式碼如下：

function main({svg_str}){

    // 正規表示式匹配程式碼塊中的內容
    const codeBlockRegex = /```[\w]*\n([\s\S]*?)```/;
    const codeMatch = svg_str.match(codeBlockRegex);

    // 正規表示式匹配 <thinking></thinking> 標籤中的內容
    const thinkingRegex = /<thinking>([\s\S]*?)<\/thinking>/;
    const thinkingMatch = svg_str.match(thinkingRegex);

    // 提取程式碼塊之後的所有內容
    let contentAfterCodeBlock = null;
    if (codeMatch) {
        const endIndex = codeMatch.index + codeMatch[0].length;
        contentAfterCodeBlock = svg_str.slice(endIndex).trim();
    }

    // 處理程式碼塊內容
    let base64 = null;
    if (codeMatch) {
        const extractedSvg = codeMatch[1].trim();
        base64 = strToBase64(extractedSvg, 'data:image/svg+xml;base64,');
    } else {
        // 如果沒有找到程式碼塊，返回錯誤資訊
        return {
            result: null,
            thinking: null,
            error: "未找到有效的程式碼塊標記。"
        };
    }

    // 處理 <thinking> 標籤內容
    let thinkingContent = null;
    if (thinkingMatch) {
        thinkingContent = thinkingMatch[1].trim();
    }

    return {
        result: base64,
        thinking: thinkingContent,
        contentAfter: contentAfterCodeBlock
    }
}

這段程式碼的功能是將 標籤中的內容、svg 程式碼塊中的內容以及最後的解讀內如分別提取出來，以便後續對其進行格式化輸出。

最終透過指定回覆節點來格式化輸出。

來看一下最終效果：

太強了！一切的起因都是那個男人李繼剛，李繼剛的這個 prompt 開啟了 AI 生成卡片的大門，大家可以發揮自己的想象力去打造更多的應用場景，嗨起來吧！

完整工作流：https://pan.quark.cn/s/019132869eca

相關文章