React 彙整

v0.dev：輸入網址，即可生成相同網站前端的 AI 工具

by rainchu | 11 月 29, 2024 | AI, 程式開發

v0.dev 是由 Vercel 開發的 AI 驅動工具，你只要透過簡單的文字提示，就可以快速生成前端網頁的 UI 元件程式碼，其核心特色在於用戶只需輸入需求描述，v0.dev 即可生成對應的 React、Vue 或 Svelte 組件程式碼，並可直接複製到專案中使用。

主要功能：

自然語言生成 UI 元件： 用戶可透過輸入簡單的文字描述，v0.dev 會根據提示生成相應的 UI 元件程式碼，無需手動編寫。
即時程式碼複製與整合： 生成的程式碼可直接複製，並整合至現有專案中，方便進行客製化調整。
支援多種前端框架： 除了 React，v0.dev 也支援 Vue 和 Svelte 等框架，滿足不同開發者的需求。

使用方法：

訪問 v0.dev 網站： 在瀏覽器中開啟 v0.dev。
輸入提示詞： 在提示框中輸入您想要複製的網址即可。
生成並複製程式碼： v0.dev 會根據您的描述生成對應的程式碼，您可直接複製並整合至您的專案中。

參考資訊：

CodeFormer 教學：一鍵去除照片馬賽克，恢復人臉細節

img.ly：創意設計與影像編輯的強大工具

by rainchu | 11 月 19, 2024 | 圖型處理, 繪圖

img.ly 是一個專為設計、影像編輯和整合工具需求而打造的平台，有支援RD的各種SDK和API，能幫助用戶輕鬆創建高品質的影像內容，並支援各種應用場景的開發需求

什麼是 img.ly？

img.ly 是一家專注於設計與影像編輯解決方案的科技公司，他們提供 API 和 SDK 服務，協助 RD 們將影像編輯功能直接整合到自己的應用程式或網站中。無論是建立圖片編輯器、社群媒體應用、行動遊戲，甚至是專業設計軟體。

其主要產品包括：

PhotoEditor SDK：功能強大的照片編輯工具，支援剪裁、濾鏡、文字覆蓋、筆刷、調整顏色等多種影像處理功能。
VideoEditor SDK：讓開發者為用戶提供簡單易用的影片編輯功能，包括剪輯、特效、濾鏡、文字添加等。
Design Editor：一個強大的設計平台，類似 Canva，幫助用戶快速製作出海報、名片、社群圖片等設計。

img.ly 的特色功能

高度可客製化
- 開發者可以根據需求調整編輯工具的外觀和功能，例如自訂顏色主題、添加專屬素材庫，甚至修改界面布局，讓用戶體驗更符合品牌形象。
跨平台支援
- img.ly 的 SDK 支援多種開發環境，包括 Web、iOS 和 Android，並與主流框架如 React、Angular、Vue.js 相容，實現無縫整合。
AI 智能編輯
- img.ly 結合了人工智慧技術，能夠自動識別影像內容並提供智能建議，例如背景移除、自動調整濾鏡效果等，節省用戶的操作時間。
專業級性能
- SDK 以高效的設計為基礎，能快速處理大型影像文件且不損失品質，適合需要精細控制的專業級設計需求。
商業授權與支援
- img.ly 提供靈活的商業授權模式，適合各種規模的企業。客戶還可獲得專業的技術支援，確保產品整合順利進行。

適用的應用場景

img.ly 的工具應用於：

列印功能：支援進階的列印功能選項，像我最近的專案就需要控制進階列印選項，像是控制列印邊界，調整大小等
社交媒體平台：用戶可以在應用內編輯照片和影片，創造吸引人的內容。
電商平台：提供商品圖片快速修飾或廣告素材製作工具。
教育領域：幫助學生進行多媒體創作，激發創造力。
遊戲開發：嵌入角色設計或遊戲場景編輯功能。

手把手教學安裝 anything-llm (不使用 docker)

by Rain Chu | 5 月 13, 2024 | AI, Chat, Linux, NodeJS, React, Ubuntu, ViteJS, 程式

AnythingLLM是一款全功能的應用程序，支持使用商業或開源的大語言模型（LLM）和向量數據庫建構私有ChatGPT。用戶可以在本地或遠端運行該系統，並利用已有文檔進行智能對話。此應用將文檔分類至稱為工作區的容器中，確保不同工作區間的資料隔離，保持清晰的上下文管理。

特點：多用戶支持、權限管理、內置智能代理（可執行網頁瀏覽、代碼運行等功能）、可嵌入到網站的聊天窗口、多種文檔格式支持、向量數據庫的簡易管理界面、聊天和查詢兩種對話模式、引用文檔內容的展示，以及完善的API支持客戶端定制整合。此外，該系統支持100%雲端部署，Docker部署，且在處理超大文檔時效率高，成本低。

安裝 Anything llm

注意，以下要用 linux 平台安裝，windows 用戶可以用 WSL，推薦用 Ubuntu OS

在自己的 home 目錄下，到 GitHub 中下載原始碼

git clone https://github.com/Mintplex-Labs/anything-llm.git

利用 yarn 作設定資源

cd anything-llm
yarn setup

把環境變數建立起來，後端主機是 NodeJS express

cp server/.env.example server/.env
nano server/.env

密文需要最少12位的字元，檔案的存放路徑也記得改成自己的

JWT_SECRET="my-random-string-for-seeding"
STORAGE_DIR="/your/absolute/path/to/server/storage"

前端的環境變數，先把/api打開即可

# VITE_API_BASE='http://localhost:3001/api' # Use this URL when developing locally
# VITE_API_BASE="https://$CODESPACE_NAME-3001.$GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN/api" # for Github Codespaces
VITE_API_BASE='/api' # Use this URL deploying on non-localhost address OR in docker.

如果你在設定的時候，遇到更新請求，可以跟我著我下面的方法作

把 prisma 更新好

yarn add --dev prisma@latest
yarn add @prisma/client@latest

前端的程式碼

先編譯前端程式碼，前端是由 viteJS + React

cd frontend && yarn build

將編譯好的資料放到 server 的目錄下

cp -R frontend/dist/* server/public/

選項，如果需要用到本地端的 LLM 模型，就把 llama-cpp 下載下來

cd server && npx --no node-llama-cpp download

把資料庫建立好

cd server && npx prisma generate --schema=./prisma/schema.prisma
cd server && npx prisma migrate deploy --schema=./prisma/schema.prisma

Server端是用來處理 api 以及進行向量資料庫的管理以及跟 LLM 交互

Collector 是一個 NodeJS express server，用來作UI處理和解析文檔

cd server && NODE_ENV=production node index.js &
cd collector && NODE_ENV=production node index.js &

更新的指令碼

現在 anything llm 更新速度超快，把這一段指令碼複製起來，方便未來作更新的動作

#!/bin/bash

cd $HOME/anything-llm &&\
git checkout . &&\
git pull origin master &&\
echo "HEAD pulled to commit $(git log -1 --pretty=format:"%h" | tail -n 1)"

echo "Freezing current ENVs"
curl -I "http://localhost:3001/api/env-dump" | head -n 1|cut -d$' ' -f2

echo "Rebuilding Frontend"
cd $HOME/anything-llm/frontend && yarn && yarn build && cd $HOME/anything-llm

echo "Copying to Sever Public"
rm -rf server/public
cp -r frontend/dist server/public

echo "Killing node processes"
pkill node

echo "Installing collector dependencies"
cd $HOME/anything-llm/collector && yarn

echo "Installing server dependencies & running migrations"
cd $HOME/anything-llm/server && yarn
cd $HOME/anything-llm/server && npx prisma migrate deploy --schema=./prisma/schema.prisma
cd $HOME/anything-llm/server && npx prisma generate

echo "Booting up services."
truncate -s 0 /logs/server.log # Or any other log file location.
truncate -s 0 /logs/collector.log

cd $HOME/anything-llm/server
(NODE_ENV=production node index.js) &> /logs/server.log &

cd $HOME/anything-llm/collector
(NODE_ENV=production node index.js) &> /logs/collector.log &