Создание веб-интерфейса для генерации текста с помощью модели GPT-2
В данной статье мы рассмотрим, как создать простой веб-интерфейс для взаимодействия с предобученной моделью GPT-2 для генерации текста. В качестве фреймворка для веб-разработки будет использоваться Flask, а для работы с моделью GPT-2 — библиотека Transformers от Hugging Face.
Основы работы
Сначала мы создадим Python-скрипт, который будет основой нашего веб-приложения, используя Flask. Этот скрипт будет обрабатывать HTTP-запросы для генерации текста с помощью модели GPT-2 и отправлять результаты обратно клиенту.
Серверная часть
Класс GPT2Generator является центральным компонентом нашего приложения. Он инициализирует модель и токенизатор GPT-2 из указанного пути и предоставляет метод generate_text, который принимает текстовый запрос пользователя и параметры генерации (такие как температура, длина ответа, количество результатов и размер n-граммы), и возвращает сгенерированный текст.
Метод generate_text использует функцию generate модели GPT-2 для создания текста на основе входных данных, принимая во внимание заданные параметры. Результаты декодируются и форматируются перед отправкой клиенту.
Flask-приложение обрабатывает два типа запросов: GET и POST. Для GET-запросов отображается HTML-страница с формой для ввода текста. Для POST-запросов, которые отправляются асинхронно с помощью JavaScript, текст из формы обрабатывается, и результаты возвращаются в формате JSON.
Клиентская часть
HTML-страница содержит форму для ввода текста, кнопку для отправки запроса и блок для отображения результатов. Стили CSS используются для базового оформления страницы.
JavaScript код, встроенный в HTML, обрабатывает отправку формы, делая асинхронный запрос к серверу и отображая полученные результаты. Также в скрипте реализована простая подсветка синтаксиса для выделения ключевых слов Python в сгенерированном тексте.
Заключение
Разработанный проект демонстрирует, как можно сочетать возможности библиотеки Transformers для работы с нейросетевыми моделями и фреймворка Flask для создания веб-приложений. Полученный веб-интерфейс предоставляет удобный способ для пользователей генерировать текст с помощью модели GPT-2, что может быть полезно для различных творческих и образовательных целей.
Такой подход позволяет легко интегрировать мощные инструменты искусственного интеллекта в веб-приложения, делая их доступными широкому кругу пользователей без необходимости глубоких знаний в области машинного обучения или программирования.
код скрипта: import torch
from transformers import GPT2LMHeadModel, GPT2Tokenizer
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
class GPT2Generator:
def __init__(self, model_path):
self.tokenizer = GPT2Tokenizer.from_pretrained(model_path)
self.model = GPT2LMHeadModel.from_pretrained(model_path)
def generate_text(self, input_text, temperature_value, length_value, num_results, no_repeat_ngram_size):
input_ids = self.tokenizer.encode(input_text, return_tensors='pt')
attention_mask = torch.ones(input_ids.shape, dtype=torch.long, device=input_ids.device)
outputs = self.model.generate(
input_ids=input_ids,
attention_mask=attention_mask,
max_length=length_value,
num_return_sequences=num_results,
no_repeat_ngram_size=no_repeat_ngram_size,
repetition_penalty=1.5,
temperature=temperature_value,
do_sample=True
)
result_text = []
for i, output in enumerate(outputs):
generated_text = self.tokenizer.decode(output, skip_special_tokens=True)
generated_text = generated_text[len(input_text):] # удаляем затравку из сгенерированного текста
result_text.append(generated_text)
return result_text
gpt2_generator = GPT2Generator("C:/gpt/model")
temperature_value = 0.1
length_value = 200
num_results = 1
ngram_value = 1
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
input_text = request.get_json()['input_text']
result_text = gpt2_generator.generate_text(input_text, temperature_value, length_value, num_results, ngram_value)
return jsonify(result_text=result_text)
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
код html интерфейса: <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Генератор ответов.</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
label {
margin-bottom: 10px;
}
textarea {
width: 80%;
height: 150px;
padding: 10px;
border-radius: 10px;
border: 1px solid #ccc;
margin-bottom: 15px;
resize: none;
}
input[type="submit"] {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #45a049;
}
#result {
display: none;
margin-top: 20px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
}
pre {
font-family: "Courier New", Courier, monospace;
background-color: #f8f8f8;
padding: 10px;
border-radius: 10px;
border: 1px solid #ccc;
margin-bottom: 15px;
overflow-x: auto;
}
.keyword {
color: #0000FF;
}
.builtin {
color: #A020F0;
}
.string {
color: #008000;
}
.comment {
color: #808080;
}
</style>
</head>
<body>
<h1>Генератор ответов.</h1>
<form id="answerForm" method="post" action="/">
<label for="input_text">Введите вопрос:</label>
<textarea name="input_text" id="input_text"></textarea>
<input type="submit" value="Сгенерировать ответ">
</form>
<div id="result">
<h2>Результат:</h2>
<ul id="resultList"></ul>
</div>
<script>
document.getElementById('answerForm').addEventListener('submit', function(event) {
event.preventDefault(); // Предотвратить отправку формы
var inputText = document.getElementById('input_text').value;
// Отправить введенный текст на сервер
fetch('/', {
method: 'POST',
body: JSON.stringify({input_text: inputText}),
headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => {
var resultList = document.getElementById('resultList');
resultList.innerHTML = ""; // Очистить список результатов
// Вывести сгенерированные ответы в список
data.result_text.forEach(function(answer) {
var newResult = document.createElement('li');
var preElement = document.createElement('pre');
preElement.innerHTML = answer;
// Выделение синтаксиса кода
preElement.innerHTML = preElement.innerHTML.replace(/(import|from|class|def|for|while|if|else|elif|try|except|finally|return|yield|break|continue|pass|lambda|print)\b/g, '<span class="keyword">$1</span>');
preElement.innerHTML = preElement.innerHTML.replace(/(\b\w+\.\w+\b)/g, '<span class="builtin">$1</span>');
preElement.innerHTML = preElement.innerHTML.replace(/('[^']*'|"[^"]*")/g, '<span class="string">$1</span>');
preElement.innerHTML = preElement.innerHTML.replace(/(#.*)/g, '<span class="comment">$1</span>');
newResult.appendChild(preElement);
resultList.appendChild(newResult);
});
document.getElementById('result').style.display = 'block'; // Показать результат
});
});
</script>
</body>
</html>
