AI 應用 - daniel-qa/Vue GitHub Wiki

AI 應用

幾家創新公司在網頁爬蟲領域取得了進展。Gina AI提供嵌入模型，允許用戶在不需要API密鑰的情況下訪問其工具。
他們的一個突出特點是Reader API，該API使得用戶只需在URL前加上'aen g.com'即可從任何網站檢索乾淨數據。
此外，開源項目Scrape Graph AI提供了一個全面的框架，用於使用 Python 模塊協調網頁爬蟲任務。

智能搜尋功能範例

透過 Jina AI 的 API，在 Vue 3 網站中實現即時搜尋建議。

  • 功能描述

使用者輸入關鍵字時，自動顯示相關搜尋結果。

後端由 Jina AI 提供語義搜尋支援。

<template>
  <div class="search-container">
    <el-input
      v-model="searchQuery"
      placeholder="輸入關鍵字進行搜尋"
      clearable
      @input="handleSearch"
    ></el-input>

    <el-card v-if="isLoading" class="loading-card">正在搜尋...</el-card>

    <el-list v-if="searchResults.length">
      <el-list-item
        v-for="(item, index) in searchResults"
        :key="index"
        class="result-item"
      >
        {{ item }}
      </el-list-item>
    </el-list>

    <el-empty v-else-if="!isLoading && searchQuery && !searchResults.length" description="未找到相關結果" />
  </div>
</template>

<script setup>
import { ref, debounce } from 'vue'
import axios from 'axios'

// 搜尋關鍵字與結果
const searchQuery = ref('')
const searchResults = ref([])
const isLoading = ref(false)

// 處理搜尋請求
const handleSearch = debounce(async () => {
  if (!searchQuery.value.trim()) {
    searchResults.value = []
    return
  }

  isLoading.value = true

  try {
    const response = await axios.post('https://api.jina.ai/v1/search', {
      query: searchQuery.value
    })

    searchResults.value = response.data?.results || []
  } catch (error) {
    console.error('搜尋失敗：', error)
  } finally {
    isLoading.value = false
  }
}, 300) // 300 毫秒防抖
</script>

<style scoped>
.search-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.loading-card {
  margin-top: 10px;
  text-align: center;
}

.result-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>

API 金鑰設定

Jina AI 的部分服務需要 API 金鑰。

你可以在 Jina AI 官方平台 註冊並獲取 API 金鑰。

獲取後，將金鑰寫入 .env 檔案，並在 Axios 中設置：

VITE_JINA_API_KEY=your_api_key_here

在 axios 請求中加入標頭：

axios.post('https://api.jina.ai/v1/search', {
  query: searchQuery.value
}, {
  headers: { 'Authorization': `Bearer ${import.meta.env.VITE_JINA_API_KEY}` }
})

運行與測試

啟動你的 Vue 項目：

npm run dev

打開瀏覽器，輸入關鍵字，即可看到即時搜尋結果。

⚠️ **GitHub.com Fallback** ⚠️