使用React和Java實(shí)現(xiàn)文本摘要小工具

更新時(shí)間：2024年11月18日 15:34:05 作者：Luckily_BAI

本文將詳細(xì)介紹如何使用 React 和 Java 搭建一個(gè)小型文本摘要工具,并基于 Hugging Face 提供的 API 來實(shí)現(xiàn)智能摘要功能,感興趣的可以了解下

在當(dāng)今互聯(lián)網(wǎng)時(shí)代，GPT、文心一言、通義千問等等模型的不斷興起，互聯(lián)網(wǎng)可能正進(jìn)入一個(gè)AI時(shí)代。本文講通過一個(gè)小案列來講述我們怎么通過AI給我們的項(xiàng)目、產(chǎn)品等賦能。本文將詳細(xì)介紹如何使用 React 和 Java 搭建一個(gè)小型文本摘要工具，并基于 Hugging Face 提供的 API 來實(shí)現(xiàn)智能摘要功能。從功能分析到代碼實(shí)現(xiàn)，我們將為你展現(xiàn)一個(gè)完整的技術(shù)實(shí)現(xiàn)過程。

項(xiàng)目目標(biāo)

我們的目標(biāo)是構(gòu)建一個(gè) Web 應(yīng)用，用戶可以通過簡單的界面輸入文本并快速獲取摘要內(nèi)容。具體功能包括：

文本輸入框： 用戶輸入需要摘要的長文本。
摘要展示框： 顯示智能生成的文本摘要。
后端 API： 使用 Java 集成 Hugging Face 提供的模型服務(wù)。
前后端交互： 基于 RESTful API，實(shí)現(xiàn)前端請求和后端處理的無縫銜接。

技術(shù)棧

前端

React：用于構(gòu)建用戶界面。
Axios：用于發(fā)起 API 請求。
CSS：簡單樣式美化。

后端

Spring Boot：用于構(gòu)建 RESTful 服務(wù)。
Jakarta Validation：用于校驗(yàn)用戶輸入。
Hugging Face API：調(diào)用預(yù)訓(xùn)練的文本摘要模型。

項(xiàng)目實(shí)現(xiàn)

1. 創(chuàng)建后端服務(wù)

1.1 項(xiàng)目結(jié)構(gòu)

我們將采用分層架構(gòu)，將代碼分為以下模塊：

Controller 層: 處理請求和響應(yīng)。
Service 層: 核心業(yè)務(wù)邏輯。
Client 層: 與 AI 模型或外部服務(wù)的交互。
DTO: 用于數(shù)據(jù)傳輸。
配置類: 用于定義全局配置，如 API 密鑰等。

目錄結(jié)構(gòu)如下：

backend/
├── src/main/java/com/lucifer/summarizer/
│   ├── config/            # 配置類
│   ├── controller/        # 控制器
│   ├── service/           # 服務(wù)層
│   ├── client/            # AI服務(wù)交互
│   ├── dto/               # 數(shù)據(jù)傳輸對象
│   ├── exception/         # 異常處理
│   └── SummarizerApplication.java
└── src/main/resources/
    ├── application.yml    # 配置文件

1.2 核心代碼實(shí)現(xiàn)

1. 配置文件

application.yml

server:
  port: 8080
?
huggingface:
  api-key: your-huggingface-api-key
  model-url: https://api-inference.huggingface.co/models/facebook/bart-large-cnn

2. 配置類

HuggingFaceConfig.java

package com.lucifer.summarizer.config;
?
import lombok.Getter;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
?
@Configuration
@Getter
public class HuggingFaceConfig {
?
    @Value("${huggingface.api-key}")
    private String apiKey;
?
    @Value("${huggingface.model-url}")
    private String modelURL;
}
?

3. 數(shù)據(jù)傳輸對象 (DTO)

TextInputDTO.java

package com.lucifer.summarizer.dto;
?
import jakarta.validation.constraints.NotBlank;
import lombok.Data;
?
import java.io.Serializable;
?
@Data
public class TextInputDTO implements Serializable {
?
    @NotBlank(message = "文本不能為空")
    private String text;
}

TextOutputDTO.java

package com.lucifer.summarizer.dto;
?
import lombok.AllArgsConstructor;
import lombok.Data;
?
@Data
@AllArgsConstructor
public class TextOutputDTO implements Serializable {
?
    private String summary;
}

4. 客戶端

HuggingFaceClient.java

package com.lucifer.summarizer.client;
?
import com.lucifer.summarizer.config.HuggingFaceConfig;
import lombok.AllArgsConstructor;
import okhttp3.*;
import org.springframework.stereotype.Component;
?
import java.io.IOException;
?
@Component
@AllArgsConstructor
public class HuggingFaceClient {
?
    private final HuggingFaceConfig config;
?
    public String getSummary(String text) throws IOException {
        OkHttpClient client = new OkHttpClient();
?
        RequestBody body = RequestBody.create(
                "{"inputs":"" + text + ""}",
                MediaType.get("application/json")
        );
        Request request = new Request.Builder()
                .url(config.getModelURL())
                .addHeader("Authorization", "Bearer " + config.getApiKey())
                .post(body)
                .build();
?
        try (Response response = client.newCall(request).execute()) {
            if (response.isSuccessful()) {
                assert response.body() != null;
                return response.body().string();
            } else {
                throw new IOException("Failed to get summary: " + response.message());
            }
        }
    }
}
?

5. 服務(wù)層

SummarizerService.java

package com.lucifer.summarizer.service;
?
public interface SummarizerService {
?
    String summarizeText(String text);
}

SummarizerServiceImpl.java

package com.lucifer.summarizer.service.impl;
?
import com.lucifer.summarizer.client.HuggingFaceClient;
import com.lucifer.summarizer.service.SummarizerService;
import lombok.AllArgsConstructor;
import org.springframework.stereotype.Service;
?
import java.io.IOException;
?
@Service
@AllArgsConstructor
public class SummarizerServiceImpl implements SummarizerService {
?
    private final HuggingFaceClient client;
?
    @Override
    public String summarizeText(String text) {
        try {
            return client.getSummary(text);
        } catch (IOException e) {
            throw new RuntimeException("Error while summarizing text", e);
        }
    }
}

6. 控制器

SummarizerController.java

package com.lucifer.summarizer.controller;
?
import com.lucifer.summarizer.dto.TextInputDTO;
import com.lucifer.summarizer.dto.TextOutputDTO;
import com.lucifer.summarizer.service.SummarizerService;
import lombok.AllArgsConstructor;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import jakarta.validation.Valid;
?
@RestController
@AllArgsConstructor
@RequestMapping("/api/v1")
public class SummarizerController {
?
    private final SummarizerService summarizerService;
?
    @PostMapping("/summarizer")
    public ResponseEntity<TextOutputDTO> summarize(@Valid @RequestBody TextInputDTO input) {
        String summary = summarizerService.summarizeText(input.getText());
        return ResponseEntity.ok(new TextOutputDTO(summary));
    }
}

7. 異常處理

package com.lucifer.summarizer.exception;
?
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
?
@ControllerAdvice
public class GlobalExceptionHandler {
?
    @ExceptionHandler(RuntimeException.class)
    public ResponseEntity<String> handleRuntimeException(RuntimeException ex) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error: " + ex.getMessage());
    }
?
    @ExceptionHandler(Exception.class)
    public ResponseEntity<String> handleException(Exception ex) {
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Error: " + ex.getMessage());
    }
}

8. 服務(wù)啟動

9. 接口測試

2. 創(chuàng)建前端界面

2.1 初始化 React 項(xiàng)目

使用 create-react-app 初始化項(xiàng)目：

npx create-react-app text-summary-app
cd text-summary-app

安裝 Axios：

npm install axios

2.2 創(chuàng)建主界面組件

import React, { useState } from "react";
import axios from "axios";
?
const TextSummary = () => {
  const [text, setText] = useState("");
  const [summary, setSummary] = useState("");
  const [loading, setLoading] = useState(false);
?
  const handleSubmit = async () => {
    if (text.trim().length < 10) {
      alert("請輸入至少10個(gè)字符的文本！");
      return;
    }
?
    setLoading(true);
    try {
      const response = await axios.post("/api/v1/summarizer", { text });
      setSummary(response.data);
    } catch (error) {
      alert("請求失敗，請稍后重試！");
    } finally {
      setLoading(false);
    }
  };
?
  return (
    <div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
      <h1>AI 文本摘要工具</h1>
      <textarea
        style={{ width: "100%", height: "150px", marginBottom: "20px" }}
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="輸入需要摘要的文本..."
      ></textarea>
      <button onClick={handleSubmit} disabled={loading}>
        {loading ? "處理中..." : "生成摘要"}
      </button>
      {summary && (
        <div style={{ marginTop: "20px", padding: "10px", border: "1px solid #ccc" }}>
          <h2>摘要結(jié)果：</h2>
          <p>{summary}</p>
        </div>
      )}
    </div>
  );
};
?
export default TextSummary;

2.3 配置代理（開發(fā)環(huán)境）

在 package.json 中添加代理配置：