본문 바로가기
IT Tip

무료 OpenAI API로 AI 비서 만들기: HTML과 JavaScript 연동 방법

by godfeeling 2025. 2. 9.

AI 비서 역할을 하는 HTML 소스를 작성해드릴게요. 기본적인 형태로 간단한 HTML, CSS, JavaScript를 포함한 예제를 제공해드립니다. 이 소스는 사용자가 버튼을 클릭하면 AI 비서가 간단한 메시지로 응답하는 형태입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 비서</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 300px;
            text-align: center;
        }
        h1 {
            color: #333;
        }
        .response {
            margin-top: 20px;
            padding: 10px;
            background-color: #e7e7e7;
            border-radius: 5px;
            font-size: 16px;
            color: #555;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI 비서</h1>
        <button onclick="getResponse()">AI에게 물어보기</button>
        <div class="response" id="aiResponse"></div>
    </div>

    <script>
        function getResponse() {
            const responses = [
                "안녕하세요! 무엇을 도와드릴까요?",
                "오늘 날씨는 어때요?",
                "계획을 세우는 데 도움이 필요하세요?",
                "저는 언제든지 도와드릴 준비가 되어 있습니다!"
            ];

            const randomResponse = responses[Math.floor(Math.random() * responses.length)];
            document.getElementById("aiResponse").textContent = randomResponse;
        }
    </script>
</body>
</html>

이 코드는 AI 비서의 기본적인 사용자 인터페이스와 버튼 클릭 시 랜덤 응답을 제공하는 기능을 포함합니다. AI 비서의 응답은 배열에서 랜덤하게 선택됩니다. 실제로 더 복잡한 AI 응답을 원하시면, 백엔드 서버나 외부 API와 연동하여 더욱 풍부한 기능을 구현할 수 있습니다.

 

무료 API를 연동하는 방법은 여러 가지가 있지만, 여기서는 OpenAI API를 예시로 사용하여 HTML, JavaScript를 통해 AI 기능을 연동하는 방법을 설명드리겠습니다. 아래 예시는 fetch를 사용하여 OpenAI API와 연결하는 방법을 다룹니다.

1. OpenAI API 키 받기

  1. OpenAI에 가입하고 로그인합니다.
  2. 대시보드에서 API 키를 발급받습니다.

2. HTML + JavaScript 예시 코드

여기서는 OpenAI의 ChatGPT 모델을 사용하여 사용자가 질문을 하면 AI가 응답하는 간단한 예제를 작성할 것입니다. 주의할 점은, 실제로 API를 호출하려면 백엔드 서버가 필요하지만, 클라이언트 측 코드에서 호출할 때 API 키를 안전하게 보호하기 어렵습니다. 따라서 이 예제는 기본적인 연동 방법을 보여주는 것입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 비서</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 300px;
            text-align: center;
        }
        h1 {
            color: #333;
        }
        .response {
            margin-top: 20px;
            padding: 10px;
            background-color: #e7e7e7;
            border-radius: 5px;
            font-size: 16px;
            color: #555;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI 비서</h1>
        <input type="text" id="userInput" placeholder="무엇을 도와드릴까요?" style="width: 100%; padding: 10px; margin-bottom: 10px;">
        <button onclick="askAI()">AI에게 물어보기</button>
        <div class="response" id="aiResponse"></div>
    </div>

    <script>
        async function askAI() {
            const userInput = document.getElementById("userInput").value;
            if (userInput === "") {
                alert("질문을 입력해 주세요.");
                return;
            }

            const apiKey = 'YOUR_OPENAI_API_KEY';  // API 키를 여기에 넣으세요
            const url = "https://api.openai.com/v1/chat/completions";
            const headers = {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${apiKey}`
            };

            const body = JSON.stringify({
                model: "gpt-3.5-turbo",  // 원하는 모델을 선택하세요
                messages: [{ role: "user", content: userInput }]
            });

            try {
                const response = await fetch(url, {
                    method: "POST",
                    headers: headers,
                    body: body
                });
                const data = await response.json();
                const aiMessage = data.choices[0].message.content;

                document.getElementById("aiResponse").textContent = aiMessage;
            } catch (error) {
                console.error("API 요청 오류:", error);
                document.getElementById("aiResponse").textContent = "오류가 발생했습니다. 다시 시도해 주세요.";
            }
        }
    </script>
</body>
</html>

3. 코드 설명

  1. HTML: 사용자 입력을 받을 텍스트 박스와 버튼을 배치하고, 버튼을 클릭하면 askAI() 함수가 실행됩니다.
  2. JavaScript:
    • askAI() 함수에서 OpenAI API로 질문을 전송하고 응답을 받아옵니다.
    • 사용자가 입력한 텍스트를 userInput 변수에 저장하고, 이를 OpenAI API에 요청합니다.
    • 응답으로 받은 AI의 답변을 aiResponse div에 출력합니다.
  3. API 키: YOUR_OPENAI_API_KEY 자리에 실제로 발급받은 OpenAI API 키를 넣어야 합니다.

4. 주의사항

  • 이 예제는 클라이언트 측에서 직접 API 호출을 하는 형태입니다. 실제 서비스에서 사용하면 API 키가 노출될 위험이 있습니다. 실무에서는 백엔드 서버에서 API를 호출하고, 클라이언트는 백엔드 서버에 요청을 보내는 방식으로 보안을 강화하는 것이 좋습니다.
  • OpenAI는 무료 API 사용 한도가 있기 때문에 일정량 이상의 호출을 원하면 유료 플랜을 사용해야 할 수 있습니다.

이 방법을 통해 AI 비서 기능을 웹사이트에 쉽게 연동할 수 있습니다.

저작자표시

'IT Tip' 카테고리의 다른 글

무료 도메인(한글 도메인) 만들기 및 등록방법  (0) 2022.04.30
나무위키 등록 방법 및 기본 소스 / 나무위키 편집 방법  (0) 2022.04.30
무료 애니 다시보기 시청방법  (0) 2021.11.25
자체 코드를 생성하는 새로운 AI 도구 출시  (0) 2021.11.23
무료 애니 다시보기 사이트  (0) 2021.11.23

관련글

댓글

티스토리툴바