跳到主要內容

發表文章

目前顯示的是有「react」標籤的文章

Google Gemini 全端 AI Agent 快速入門 - 打造「思考」的 AI 助理

一套從搜尋、反思到輸出的全端 AI 代理人範例,讓你看懂什麼叫 Research Agent 在 AI 工具百家爭鳴的今天,大家都在問一個問題: 「我能不能不只問 AI 答案,而是讓它像一位助理一樣,有流程、有反思、還有出處,真正幫我完成一件事?」 Google 最近釋出了一個相當具有指標意義的開源專案 gemini-fullstack-langgraph-quickstart ,正是為了解這個問題而誕生。 這套系統到底是什麼? 這個範例不是傳統 Chatbot,而是展示一個完整的 AI research agent : 它會根據使用者的提問,自動發想搜尋關鍵字、查資料、整合重點,最後給出答案還附上引用來源。背後的邏輯設計得非常扎實,不只是能跑,更是具備可讀性、可擴展性與可商用性。 它的流程大致如下:  1. 使用者輸入問題(例如:「抖音是否影響台灣選舉?」)  2. Gemini LLM 幫你想出關鍵字(不只是照抄問題)  3. 呼叫 Google Search API 抓資料   4. LangGraph 控制流程 → 判斷資料夠不夠 → 若不足,自動補查  5. 整合最終答案,並產生 citation(來源說明) 你可以想像這就像一位實習助理幫你寫報告, 不只輸出一段內容,而是會 去查、會判斷、會補資料,而且說明「我為什麼這樣說」 。 LangGraph 是什麼角色? LangGraph 就是整個 Agent 背後的控制系統 。 用白話講,它幫你定義 AI 每一步要幹嘛、遇到什麼狀況該走哪條路、要不要反思、要不要再查,甚至可以定義條件邏輯與資料流動。 這就不像寫一個單純的 Chat API,而是比較像「把一個流程圖變成可以跑的程式」。 對工程師來說,它提供了從 prompt 到流程控制的設計彈性;對產品設計來說,它讓 AI 有了 「多步驟任務執行」 的能力。 技術架構與使用方式 這整套系統是 Fullstack 架構,前後端都幫你整好了,技術選型也非常實用:   前端:Vite + React + TailwindCSS + Shadcn UI  後端:FastAPI + LangGraph...

React Native v0.64 更新摘要

重要更新 Hermes Support Hermes 是一個針對 React Native 於 JavaScript 最佳化編譯處理的專案,此次主要更新在於 iOS 環境上的優化,至於 android … (要改得太多,就改天吧! Inline Requires 之前都只能用 import 的方式,如果只是某個區塊要使用,總是會覺得記憶體無法妥善回收,這方面的優化,對於記憶體使用相信會有一定程度上的改善。 React 17 版本更新支援 其他很重要的更新 摒棄 Android API levels 16-20. (本產品不支援舊有手機,謝謝) Xcode 12 / CocoaPods 1.10 ,這點很重要 cocoapods 還沒有更新的朋友,請加速! Node 12 為最低環境!(還在採用 v10 的朋友們,哭哭 … Flipper 更新到 0.75.1 參考文件 當然是官方網站 https://reactnative.dev/blog/2021/03/12/version-0.64

redux 可以使用多個不同 store 嗎?

redux 可以使用多個不同 store 嗎? 原本很直覺的回答這個問題是,可以的! 但是透過 google 一段時間之後,才深入去找問題的本身,發現 redux 作者希望,除非必要性的需求,否則盡量使用『單一 reduxer 對應到單一 store』 ,本持的精簡的精神處理物件。 處理範例方式,GitHub 可以採用以下的方式,用多個不同 reducer 包裝起來 // reducers.js export step1 from './step1' export step2 from './step2' // constants.js export const STEP1_COMPLETED = 'STEP1_COMPLETED' export const STEP2_COMPLETED = 'STEP2_COMPLETED' // step1.js import { STEP1_COMPLETED } from './constants' const initialStep1State = { email: '', password: '', } export function step1(state = initialStep1State, action) { switch (action.type) { case STEP1_COMPLETED: return { ...state, email: action.email } default: return state } } // step2.js import { STEP2_COMPLETED } from './constants' const initialStep2State = { firstname: '', lastname: '', } export function step2(state = initialStep2State, action) { switch (action.type) { case STEP2_CO...

React 新版本控制方案

React 新版本控制方案 React 版本大躍進,就在時間 2016/2/19 React 宣布一個重要消息,就是從 原本 v0.14.0 下一個版本為 React v15.0.0 。 這段升級實在是讓人嚇了一大跳,察看一下,今天又還沒到 4/1 愚人節,這肯定是對於 react 的陣營來說的確是投下一個震撼的消息。 而 react 也對 v15.0.0 這個重大版本宣布,寫了一篇文章仔細描述對於 react 社群未來的意義。 React 是前端模組開發首要選擇之一,相信目前學習 react ,或者在正式環境中使用 react 已經一個顯學,從官方資料中顯示,react 使用者已經有 79% 升級到 v0.14.0 版本的躍進 相信各位最大的疑問就是,v1.0.0 到底跑到哪裡去了?官方聲名中有明確的點出了為什麼跳過 v1.0.0 這個版本號, Part of React's growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. 將 v0 拿掉也意味著,『現在』 react 就已經是一個穩定的版本,可以適用於正式環境中,讓開發人員對於 react 的信任,接下來也同時依照 semver ,讓開發人員可以從版本號知道每個版本釋出的變動程度。 使用 react v15.0.0 的開發者,也意味著加入了 react 的整個生態圈中,不用再擔心是否會有重大的 API 改變,或者某些功能會任意的被...