edit: api response error 처리 추가

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

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')
+const inputTxtBox4 = $('#input_txt_box_4')
+const errorZone1 = $('#error_zone_1')
+const errorZone2 = $('#error_zone_2')

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

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>