npm install express body-parser mysql axios cors
server.js
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const axios = require('axios');
const cors = require('cors');
const app = express();
const port = 3000;
// OpenAI API 키
const apiKey = "__";
// MySQL 연결 설정
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'kiosk',
port: 4306
});
db.connect(err => {
if (err) {
console.error('DB 연결 오류:', err);
} else {
console.log('DB 연결 성공');
}
});
app.use(bodyParser.json());
app.use(cors());
app.get('/', (req, res) => {
res.send('Hello, this is the root endpoint!');
});
app.post('/recommend', async (req, res) => {
const userInput = req.body.text;
try {
const response = await axios.post('https://api.openai.com/v1/chat/completions', {
model: "gpt-3.5-turbo",
messages: [
{ role: "system", content: "You are a helpful assistant." },
{ role: "user", content: userInput }
],
max_tokens: 50
}, {
headers: {
"Authorization": `Bearer ${apiKey}`,
"Content-Type": "application/json"
}
});
const recommendation = response.data.choices[0].message.content.trim();
// 음성 인식 결과를 단어 단위로 분할하여 검색
const searchTerms = recommendation.split(' ').filter(term => term.length > 1); // 한 글자는 제외
const placeholders = searchTerms.map(term => `menu LIKE '%${term}%' OR category LIKE '%${term}%'`).join(' OR ');
// DB에서 추천 메뉴 정보 조회
const query = `SELECT * FROM menu WHERE ${placeholders}`;
db.query(query, (err, results) => {
if (err) {
console.error('DB 조회 오류:', err);
res.status(500).send('DB 조회 오류');
} else {
res.json(results);
}
});
} catch (error) {
console.error('OpenAI API 오류:', error);
res.status(500).send('OpenAI API 오류');
}
});
app.listen(port, () => {
console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>음성을 텍스트로 변환하기</title>
</head>
<body>
<h1>음성을 텍스트로 변환하기</h1>
<button onclick="startListening()">음성 입력 시작</button>
<div id="result"></div>
<div id="menu-recommendation"></div>
<script>
function startListening() {
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ko-KR'; // 인식할 언어 설정 (한국어)
recognition.interimResults = false; // 중간 결과 표시 여부
recognition.onresult = function(event) {
var result = event.results[0][0].transcript;
document.getElementById('result').textContent = result;
getRecommendation(result);
};
recognition.onerror = function(event) {
console.error('음성 입력 오류:', event.error);
};
recognition.onend = function() {
console.log('음성 입력 종료');
};
recognition.start();
}
function getRecommendation(transcript) {
fetch('http://localhost:3000/recommend', { // 3000번 포트로 요청을 보냅니다.
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text: transcript })
})
.then(response => response.json())
.then(data => {
document.getElementById('menu-recommendation').textContent = JSON.stringify(data, null, 2);
})
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>
안녕하세요. 배운 것을 메모하는 velog입니다.