From 550b4d88ccc134264bed172312205c03b2ce5f7d Mon Sep 17 00:00:00 2001
From: sykweon <tmddus6396@daooldns.co.kr>
Date: Mon, 20 Jan 2025 13:31:16 +0900
Subject: [PATCH] =?UTF-8?q?edit:=20api=20response=20error=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/static/css/style.css |  6 ++++++
 src/static/js/const.js   |  4 +++-
 src/static/js/utility.js | 12 ++++++++++++
 src/templates/index.html |  2 ++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/static/css/style.css b/src/static/css/style.css
index f299b48..3006640 100755
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -52,6 +52,7 @@ body {
 
 .generator_btn_zone {
     text-align: center;
+    margin-top: 4px;
 }
 
 .generator_btn {
@@ -66,4 +67,9 @@ body {
 
 #input_txt_box_3, #input_txt_box_4 {
     width: 45px;
+}
+
+.error_zone {
+    color: red;
+    font-size: 15px; 
 }
\ No newline at end of file
diff --git a/src/static/js/const.js b/src/static/js/const.js
index e48db1d..952561f 100755
--- a/src/static/js/const.js
+++ b/src/static/js/const.js
@@ -11,4 +11,6 @@
 const inputTxtBox1 = $('#input_txt_box_1')
 const inputTxtBox2 = $('#input_txt_box_2')
 const inputTxtBox3 = $('#input_txt_box_3')
-const inputTxtBox4 = $('#input_txt_box_4')
\ No newline at end of file
+const inputTxtBox4 = $('#input_txt_box_4')
+const errorZone1 = $('#error_zone_1')
+const errorZone2 = $('#error_zone_2')
\ No newline at end of file
diff --git a/src/static/js/utility.js b/src/static/js/utility.js
index b849626..c64f993 100755
--- a/src/static/js/utility.js
+++ b/src/static/js/utility.js
@@ -14,12 +14,18 @@ let apiRequestBody = {
 }
 
 function generatorBtn1() {
+    errorZone1.html(" ")
     try {
         const apiUrl = `http://${REST_SERVER.IP}:${REST_SERVER.PORT}${DALLE3_REQUEST_URL}`
 
         apiRequestBody.prompt = inputTxtBox1.val()
         apiRequestBody.downloadCount = inputTxtBox3.val()
         postData(apiUrl, apiRequestBody)
+            .then(data => {
+                if(data.error && data.error !== "") {
+                    errorZone1.html(data.error);
+                }
+            })
     }
     catch (error) {
         console.error(`Error: ${error.name}`)
@@ -27,12 +33,18 @@ function generatorBtn1() {
 }
 
 function generatorBtn2() {
+    errorZone2.html(" ")
     try {
         const apiUrl = `http://${REST_SERVER.IP}:${REST_SERVER.PORT}${IMAGEN_REQUEST_URL}`
 
         apiRequestBody.prompt = inputTxtBox2.val()
         apiRequestBody.downloadCount = inputTxtBox4.val()
         postData(apiUrl, apiRequestBody)
+            .then(data => {
+                if(data.error && data.error !== "") {
+                    errorZone2.html(data.error);
+                }
+            })
     }
     catch (error) {
         console.error(`Error: ${error.name}`)
diff --git a/src/templates/index.html b/src/templates/index.html
index 900160f..3b67431 100755
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -32,6 +32,7 @@
             <span class="download_count">Download Count:</span>
             <input type="text" id="input_txt_box_3" class="input_txt_box" value="1">
         </div>
+        <div id="error_zone_1" class="error_zone"></div>
         <div class="generator_btn_zone">
             <button onclick="generatorBtn1()" id="generator_1_btn" class="generator_btn">Create</button>
         </div>
@@ -45,6 +46,7 @@
             <span class="download_count">Download Count:</span>
             <input type="text" id="input_txt_box_4" class="input_txt_box" value="1">
         </div>
+        <div id="error_zone_2" class="error_zone"></div>
         <div class="generator_btn_zone">
             <button onclick="generatorBtn2()" id="generator_1_btn" class="generator_btn">Create</button>
         </div>