前面的單元都屬於小兒科，再來就得認真刻我們的前端頁面了

這邊要先來刻的是，RAG 的核心 -- 資料檢索，所以我們要先來刻處理文件的頁面

首先是主頁的部分，我們使用了可以單次上傳多份文件的元件，並且搭配一個 Markdown 元件去顯示當前上傳檔案的狀態

那直接來看程式碼的部分

這邊是先啟好 Ollama 的服務與 Qdrant 的 Docker 容器

• ./.env

  這邊統一將服務的位置當成環境變數做儲存

  OLLAMA_SERVER_URL=http://127.0.0.1:11434
  QDRANT_SERVER_URL=http://127.0.0.1:6333
  

• ./upload_page.py

  主程式的部分使用 gradio(4.32.1) 當作核心套件，dotenv 用來協助我們讀取 .env 中的變數資訊，向量搜尋的部分使用 Qdrant 官方支援的 fastembed 套件，而文字擷取的部分則是透過 PyPDF2 的套件去幫助我們做文字擷取

  以上套件安裝即在終端中輸入pip3 install python-dotenv fastembed PyPDF2 gradio==4.32.1即可

  import gradio as gr
  from utils import File, qdrant_client
  from dotenv import load_dotenv
  load_dotenv(dotenv_path="./.env", override=True)
  
  # 定義主頁面的元素
  with gr.Blocks() as demo:
      with gr.Row():
          with gr.Row():
              upload = gr.Files(label="上傳檔案")
  
          with gr.Row():
              upload_status = gr.Markdown(value="")
  
      # 設定當用戶上傳檔案的行為
      upload.upload(
          File.upload_file,
          inputs=[upload],
          outputs=[upload_status]
      )
  
  if __name__ == "__main__":
      collection_list = []
      collections = qdrant_client.get_collections()
      for collection in collections:
          for c in list(collection[1]):
              collection_list.append(c.name)
  
      # 詞嵌入模型我們使用 "intfloat/multilingual-e5-large"，且確認 Collection 是否有在 Qdrant 裡面
      qdrant_client.set_model("intfloat/multilingual-e5-large", cache_dir="./.cache")
      if "iron" not in collection_list:
          qdrant_client.create_collection(
              collection_name="iron",
              vectors_config=qdrant_client.get_fastembed_vector_params()
          )
      demo.launch(
          server_port=7860, 
          server_name="0.0.0.0"
      )
  

• ./utils.py

  import os
  import PyPDF2
  import gradio as gr
  from qdrant_client import QdrantClient
  
  qdrant_client = QdrantClient(url=os.getenv("OLLAMA_SERVER_URL"))
  drant_client.set_model("intfloat/multilingual-e5-large", cache_dir="./.cache")
  
  
  class File:
      def upload_file(file_paths: list):
          yield "上傳中"
          try:
              for file_path in file_paths:
                  reader = PyPDF2.PdfReader(open(file_path, 'rb'))
                  for index in range(len(reader.pages)):
                      qdrant_client.add(
  		collection_name="iron",
  		documents=[reader.pages[index].extract_text()],
                      	metadata=[{"filename": os.path.basename(file_path)}]
  	     )
          except:
              yield "上傳失敗"
  
          yield "上傳成功"
  

這時我們試著上傳一個來自快打旋風的經典角色 -- 豪鬼 的維基 PDF 檔案

右方的進度條就是 Markdown 的元件正在運作中的效果

我們也可以在瀏覽器中輸入http://127.0.0.1:6333/dashboard#/collections/iron確認 collection 內的狀況