TL;DR：在這篇文章中，我將向您介紹使用 React 和 Node.js 輕鬆建立全端應用程式的超高效堆疊 - Supabase 和 Wasp！我們將這兩種技術結合起來，使身份驗證、非同步作業、全端類型安全性、託管資料庫和託管儲存開箱即用。
嘿，我是美穗！ 👋
我是一名高級全端開發人員，我從事夢想和建立專案的工作已經近 10 年了。幾乎每天我都會偶然發現一個問題，並想建立一個應用程式來解決它！這就是為什麼我必須盡快做好這件事，盡可能少麻煩。
在使用 Wasp 和 Supabase 一段時間後，將它們組合在一起對我來說似乎是理所當然的。事實證明我是對的！
沒有理論，我們將建立一個應用程式！
我們製作了一些有趣的東西：賀卡產生器，它不僅可以工作，而且還具有無限的創意！利用開源人工智慧模式——是的，閃亮的全新 Llama 3 和超高速的 SDXL-Lighting——我們將這個想法變成了現實。
需要視覺效果嗎？這是我製作的一個快速草圖（幸好我有那台平板電腦！）：
這就是我們的應用程式在完善並準備就緒後的樣子：
{% 嵌入 https://twitter.com/infomiho/status/1782416172111024600 %}
查看我們應用程式的部署版本- 使用 Google 登入並獲得一些甜蜜的卡片！
駱駝有最後發言權
在我們的應用程式中，多個模型協作產生漂亮的結果。
它的工作原理如下：
-
用戶給我們一個主題
-
Llama 3 產生賀卡文字（「text」）
-
……它還描述了一些適合文字的藝術作品（“圖像提示”）
-
穩定擴散繪製藝術品
-
???
-
利潤！
想像一下，為你三歲的、專橫的、喜歡穿紅衣服的美洲駝索要一張賀卡（因為誰不會呢？！）。
你會得到這樣可愛的東西！ 🦙：
提示：“為我的美洲駝三歲生日準備的賀卡，它很專橫，喜歡穿紅色衣服”
支持我們！ 🙏⭐️
如果您覺得這篇文章有幫助，請考慮在 Github 上給我們一顆星！我們在 Wasp 所做的一切都是開源的，您的支援幫助我們使 Web 開發變得更容易，並激勵我們撰寫更多這樣的文章。
{% cta https://github.com/wasp-lang/wasp %} ⭐️ 感謝您的支持🙏 {% endcta %}
我們是如何成功的
恕我直言，這是一張非常酷的賀卡，但我們還需要更多的東西才能使其成為適合我們用戶的合適應用程式。
我們想用Google登入
我們使用Wasp的內建身份驗證，這使您的身份驗證完全屬於您自己，並且獨立於任何第三方服務。在底層，它使用Lucia和Arctic為您提供開箱即用的電子郵件、使用者名稱和多個 OAuth 提供者。
除了這段程式碼之外，我們不需要做太多的工作來設定它：
Wasp設定檔程式碼
我們想把製卡過程分開
使用 Wasp 的非同步作業，我們將卡片建立過程分成可管理的步驟，因此使用者不會被蒙在鼓裡。他們獲得了有趣的更新，例如“預熱人工智慧”和“繪製圖像”——讓等待變得更容易忍受🐻
這些任務由pg-boss在幕後管理（基於 PostgreSQL），哦，看，無縫連接到...
託管 PostgreSQL
在這個應用程式中使用Supabase堅如磐石的 PostgreSQL 資料庫是一次很棒的體驗。該產品的 DX 是驚人的：當您不想從頭開始建立自己的管理面板時，查看和管理資料庫資料是一個救星。
表編輯器非常適合對資料庫進行快速管理工作
現代應用程式需要現代存儲
對於存儲，我們選擇了 Supabase 的S3 相容存儲選項。這意味著我們的應用程式不依賴專用磁碟儲存 - 使其更便攜且更容易擴展。
賀卡圖像概述
火焰3-70B型號
Meta 最新的 Llama3 是 GPT-4（仍在訓練的 405B 模型）的開源競爭者。
{% 嵌入 https://twitter.com/lmsysorg/status/1782483699449332144 %}
它產生的文本在大多數情況下總是有用且有趣的。我覺得不需要那麼多的及時調整就能獲得好的結果。
我們使用的提示
寫賀卡：
Write a greeting card text for the following topic: "<topic>". Make it clever.
Return it as plain text, no quotes, no extra syntax.
Return only the greeting card text. Max chars: 80!例如，如果我們使用“笑”這個主題，我們會得到以下結果：“笑是最好的良藥，除非您有健康保險，否則可能會更好。”
取得可用影像提示：
Based on the text I'll provide, give me a nice artwork to go alongside it.
Describe it in a way of a short list of features of the artwork.
Use descriptive language so someone can paint it.
Only respond with the description, no extra syntax. Max words: 30
Context: <original_topic>
Text:
<text>對於上面的範例，我們會得到以下圖像提示：「一個微笑的藥瓶的異想天開的插圖，周圍環繞著旋轉的笑聲氣泡，背景中有一個微妙的醫療十字架，襯託在溫暖、陽光明媚的黃色天空的映襯下。
現在，我們為什麼要做第二步？只需比較“文字”和“圖像提示”直接生成的圖像：
直接使用“文字”
使用 Llama 3 產生的“影像提示”
正如您所看到的，基於圖像提示的版本在美學上與賀卡氛圍更加一致——色彩豐富且友好。
SDXL-Lighting （4 步變體）模型
位元組跳動基於Stable Diffusion XL製作了這個模型，並使其速度超快。賀卡圖像在 1-2 秒內建立。這些圖像讓我想起了 Midjourney 的質量，這意味著模型做得很好。
生成成本和時間
我們使用Replicate來執行模型，到目前為止，90 張卡的成本為 26 美分，這意味著每張卡的成本不到三分之一美分！
開源模型、最少的代幣使用和快速圖像生成的結合使成本保持在令人印象深刻的低水平。
製作一張卡片只需不到 5 秒，如果您趕時間，這會有所幫助 🙂
試一試！
在我們應用程式的部署版本中查看ShadCN製作的漂亮 UI — 使用 Google 登入並獲得一些可愛的卡片！另外，整個專案是開源的。從GitHub取得程式碼。
原文出處：https://dev.to/wasp/wasp-x-supabase-smokin-hot-full-stack-combo-ioe
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式