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

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

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;
}
​

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;
}

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

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());
            }
        }
    }
}
​

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

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);
        }
    }
}

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));
    }
}

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());
    }
}

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

npm install axios

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

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