使用React和Java实现文本摘要小工具

目录

• 项目目标
• 技术栈
• 项目实现
• 1. 创建后端服务
• 2. 创建前端界面
• 深入优化

在当今互联网时代，GPT、文心一言、通义千问等等模型的不断兴起，互联网可能正进入一个AI时代。本文讲通过一个小案列来讲述我们怎么通过AI给我们的项目、产品等赋能。本文将详细介绍如何使用 React 和 Java 搭建一个小型文本摘要工具，并基于 Hugging Face 提供的 API 来实现智能摘要功能。从功能分析到代码实现，我们将为你展现一个完整的技术实现过程。

项目目标

我们的目标是构建一个 Web 应用，用户可以通过简单的界面输入文本并快速获取摘要内容。具体功能包括：

• 文本输入框： 用户输入需要摘要的长文本。
• 摘要展示框： 显示智能生成的文本摘要。
• 后端 API： 使用 Java 集成 Hugging Face 提供的模型服务。
• 前后端交互： 基于 RESTful API，实现前端请求和后端处理的无缝衔接。

技术栈

前端

• React：用于构建用户界面。
• AxIOS：用于发起 API 请求。
• css：简单样式美化。

后端

• Spring Boot：用于构建 RESTful 服务。
• Jakarta Validation：用于校验用户输入。
• Hugging Face API：调用预训练的文本摘要模型。

项目实现

1. 创建后端服务

1.1 项目结构

我们将采用分层架构，将代码分为以下模块：

• Controller 层: 处理请求和响应。
• Service 层: 核心业务逻辑。
• Client 层: 与 AI 模型或外部服务的交互。
• DTO: 用于数据传输。
• 配置类: 用于定义全局配置，如 API 密钥等。

目录结构如下：

backend/

├── src/main/java/com/lucifer/summarizer/

│   ├── config/            # 配置类

│   ├── controller/        # 控制器

│   ├── service/           # 服务层

│   ├── client/            # AI服务交互

│   ├── dto/               # 数据传输对象

│   ├── exception/         # 异常处理

│   └── SummarizerApplication.java

└── src/main/resources/

    ├── application.yml    # 配置文件

 

1.2 核心代码实现

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. 数据传输对象 (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.su编程mmarizer.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 + ""}",
                MediaTyp编程客栈e.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. 服务层

SummarizerService.java

package com.lucifer.summarizer.service;
​
public interfacjavascripte 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. 服务启动

9. 接口测试

2. 创建前端界面

2.1 初始化 React 项目

使用 create-react-app 初始化项目：

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

安装 Axios：

npm install axios

2.2 创建主界面组件

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个字符的文本！");
      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}&androidgt;
        {loading ? "处理中..." : "生成摘要"}
      </button>
      {summary && (
        <div style={{ marginTop: "20px", padding: "10px", border: "1px solid #ccc" }}>
          <h2>摘要结果：</h2>
          <p>{summary}</p>
        </div>
      )}
    </div>
  );
};
​
export default TextSummary;

2.3 配置代理（开发环境）

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

"proxy": "http://localhost:9527"

深入优化

1.用户体验：

• 添加字符计数器，限制输入长度。
• 使用第三方组件库（如 Material-UI）改进界面样式。

2.性能优化：

• 在后端使用缓存（如 Redis）存储最近的摘要结果。
• 在前端增加延迟请求，减少频繁调用。

3.错误处理：

• 处理 Hugging Face API 的限流问题。
• 提供友好的错误提示。

4.扩展功能：

• 支持多语言摘要。
• 添加更多 AI 模型（如情感分析、关键词提取）。

以上就是使用React和Java实现文本摘要小工具的详细内容，更多关于React Java文本摘要的资料请关注编程客栈(www.devze.com)其它相关文章！