중간 수정(미완성)

app.py

@@ -29,38 +29,12 @@ demo_dic = get_list()
 ##### Home #####
 @app.route('/')
 def home_page():
-    example_embed = 'This website analyzes stock market news and provides answers to questions related to news articles.'
-    return render_template('index.html', embed=example_embed)# html을 불러올 때,
+    website_description_box = 'This website analyzes stock market news and provides answers to questions related to news articles.'
+    return render_template('index.html', embed=website_description_box)# html을 불러올 때,
 
 
 
 ##### Data fetch #####
-@app.route('/submit', methods=['GET', 'POST'])
-def submit():
-    input_text = request.args.get('input_text')
-    return jsonify(result={"output":"My output is a summary of: "+input_text})
-
-
-
-
-@app.route('/model', methods=['GET', 'POST'])
-def model():
-    print("\t\t Start model !!!")
-
-    # Javascript 에서 받은 메시지
-    text_input = request.args.get('text_input')
-
-    print(f"Fetch from Javascript /inference, text_input : {text_input}")
-
-    # modules/reference.py 에서 모델 적용
-    output = Tk_instruct(text_input)
-    
-    text_output = {"text_output": output}
-    print(f"Fetch from Javascript /inference, text_output : {text_output}")
-    return jsonify(result=text_output)
-
-
-
 
 # Show Ticker's Table
 @app.route('/stocks', methods=['GET', 'POST'])
@@ -72,10 +46,6 @@ def stocks():
 
 
 
-
-
-
-
 ################################################################################################
 
 
@@ -86,12 +56,12 @@ ticker_dic = dict.fromkeys(demo_dic.ticker, []) # ticker1: [{날짜1: [제목1,
 
 dir = './news'
 if not os.path.exists(dir):
-    raise NotImplementedError("Not exists News Data")# 오류 강제 발생
+    raise NotImplementedError("Not exists News Data") # 오류 강제 발생
 
 # News Data List 가져오기
 for key in os.listdir(dir):
     if key not in ticker_dic.keys():
-        raise NotImplementedError("Not exists Ticker")# 오류 강제 발생
+        raise NotImplementedError("Not exists Ticker") # 오류 강제 발생
 
     dir2 = os.path.join(dir, key)
     ticker_dic[key] = dict.fromkeys(os.listdir(dir2), []) # 날짜1: [제목1, 제목2, ...]
@@ -107,17 +77,6 @@ for key in os.listdir(dir):
             ticker_dic[key].pop(date)
 
 
-# from IPython import embed; embed()
-
-
-
-# Show Ticker's Title
-@app.route('/<ticker>', methods=['GET', 'POST'])
-def ticker(ticker):
-    example_embed = "%s Chart" % (ticker)
-
-    return render_template('chart.html', embed=example_embed)
-
 
 # Show Ticker's Data
 @app.route('/chart', methods=['GET', 'POST'])
@@ -133,32 +92,28 @@ def chart():
     # 날짜 형식 바꾸기
     chart_data.index = [k.strftime("%Y-%m-%d") for k in chart_data.index]
 
-    result = chart_data.to_dict()
-    return jsonify(result=result)
-
+    chart_data = chart_data.to_dict()
 
-@app.route('/news', methods=['GET', 'POST'])
-def news():
-    print("Start /news ")
 
-    # Javascript 에서 받은 메시지
-    ticker = request.args.get('ticker')
+    ################
 
     news_dir = os.path.join('./news', ticker)
 
     # 해당 Ticker의 날짜별 뉴스 제목을 가져온다.
-    result = {}
+    article_news_dict = {}
     for key in os.listdir(news_dir):
         title_list = os.listdir(os.path.join(news_dir, key))
         if len(title_list) != 0:
-            result[key] = os.listdir(os.path.join(news_dir, key))
+            article_news_dict[key] = os.listdir(os.path.join(news_dir, key))
 
     # 최근 뉴스부터 보이게 (정렬)
-    sorted_result = {}
-    for key, value in sorted(result.items(), reverse=True):
-        sorted_result[key] = value
+    news_articles = {}
+    for key, value in sorted(article_news_dict.items(), reverse=True):
+        news_articles[key] = value
+
+
+    return jsonify(chart_data=chart_data, news_articles=news_articles)
 
-    return jsonify(result=sorted_result)
     
 
 
@@ -218,8 +173,10 @@ def ticker_title():
     example_embed3 = "Title: %s" % (title)
     example_embed4 = url
 
-
-    return render_template('news_analysis.html', embed1=example_embed1, embed2=example_embed2, embed3=example_embed3, embed4=example_embed4)
+    return '''
+    newsInit(example_embed1, example_embed2, example_embed3, example_embed4)
+    '''
+    # return render_template('news.html', embed1=example_embed1, embed2=example_embed2, embed3=example_embed3, embed4=example_embed4)
 
 
 

static/css/news.css

@@ -112,13 +112,22 @@
 
 /* id : "#" */
 #model {
+    /*
+        [ text-align 태그 ]
+        텍스트의 정렬 방향을 설정
+
+        left: 왼쪽 정렬
+        right: 오른쪽 정렬
+        center: 중앙 정렬
+        justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
+    */
     text-align: center;
 }
 
 /* id : "#" */
 #text-input {
     width: calc(100% / 2); /* 속성의 요소 너비 */
-    height: 78px;
+    height: 78px; /* 속성의 요소의 높이를 지정 */
     word-break: break-all;
 }
 

static/js/cal.js

@@ -0,0 +1,114 @@
+/**
+ * 달력 렌더링 할 때 필요한 정보 목록
+
+    현재 월 (초기값 : 현재 시간)
+    금월 마지막일 날짜와 요일
+    전월 마지막일 날짜와 요일
+ */
+    function calendarInit() {
+
+        // 날짜 정보 가져오기
+        var date = new Date(); // 현재 날짜(로컬 기준) 가져오기
+        var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000); // utc 표준시 도출
+        var kstGap = 9 * 60 * 60 * 100; // 한국 kst 기준시간 더하기
+        var today = new Date(utc + kstGap); // 한국 시간으로 date 객체 만들기(오늘)
+    
+        console.log("Today : ", today)
+    
+        // 달력에서 표기하는 날짜 객체
+        var thisMonth = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    
+        var currentYear = thisMonth.getFullYear(); // 달력에서 표기하는 연
+        var currentMonth = thisMonth.getMonth(); // 달력에서 표기하는 월
+        var currentDate = thisMonth.getDate(); // 달력에서 표기하는 일
+    
+        // kst 기준 현재시간
+        console.log("thisMonth");
+        console.log(currentYear);
+        console.log(currentMonth); // monthIndex
+        console.log(currentDate);
+        console.log(thisMonth);
+    
+        // 캘린더 랜더링
+        renderCalender(thisMonth);
+    
+    
+        ////////////////////////////////////////////////////////////////
+    
+        function renderCalender(thisMonth, help=0) {
+    
+            // 랜더링을 위한 데이터 정리
+            currentYear = thisMonth.getFullYear();
+            currentMonth = thisMonth = thisMonth.getMonth();
+            if (help != 1) {
+                // currentDate = thisMonth.getDate(); // 1 - 31 : 1 - 31
+                currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getDate();
+            }
+    
+            // 이전 달의 마지막날 날짜와 요일 구하기
+            var startDay = new Date(currentYear, currentMonth, 0);
+            var prevDate = startDay.getDate(); // 1 - 31 : 1 - 31
+            var prevDay = startDay.getDay(); // Sunday - Saturday : 0 - 6
+    
+            // 이번 달의 마지막날 날짜와 요일 구하기
+            var endDay = new Date(currentYear, currentMonth + 1 , 0);
+            var nextDate = endDay.getDate(); // 1 - 31 : 1 - 31
+            var nextDay = endDay.getDay(); // Sunday - Saturday : 0 - 6
+    
+            // console.log(prevDate, prevDay, nextDate, nextDay, currentMonth);
+    
+            // 현재 월 표기
+            $('.year-month').text(currentYear + '.' + (currentMonth + 1));
+    
+            // 랜더링 html 요소 생성
+            calendar = document.querySelector('.dates')
+            calendar.innerHTML = '';
+    
+            // 지난달
+            for (var i = prevDate - prevDay + 1; i <= prevDate; i++) {
+                calendar.innerHTML = calendar.innerHTML + '<div class="day prev disable">' + i + '</div>'
+            }
+    
+            // 이번달
+            for (var i = 1; i <= nextDate; i++) {
+                calendar.innerHTML = calendar.innerHTML + '<div class="day current">' + i + '</div>'
+            }
+    
+            // 다음달
+            for (var i = 1; i <= (7 - nextDay == 7 ? 0 : 7 - nextDay); i++) {
+                calendar.innerHTML = calendar.innerHTML + '<div class="day next disable">' + i + '</div>'
+            }
+    
+            // 오늘 날짜 표기
+            if (today.getMonth() == currentMonth) {
+                todayDate = today.getDate();
+                var currentMonthDate = document.querySelectorAll('.dates .current'); // 중간 띄어쓰기 주의
+                // var currentMonthDate = document.querySelectorAll('div.day.current'); // 같은 의미
+    
+                // console.log(currentMonthDate)
+                currentMonthDate[todayDate-1].classList.add('today');
+            }
+    
+            // 이전달로 이동
+            $('.go-prev').on('click', function() {
+                if (help == 0) {
+                    thisMonth = new Date(currentYear, currentMonth - 1, 1);
+                    renderCalender(thisMonth, 1);
+                }
+                else {
+                    renderCalender(thisMonth, 1);
+                }
+            })
+    
+            // 다음달로 이동
+            $('.go-next').on('click', function() {
+                if (help == 0) {
+                    thisMonth = new Date(currentYear, currentMonth + 1, 1);
+                    renderCalender(thisMonth, 1);
+                }
+                else {
+                    renderCalender(thisMonth, 1);
+                }
+            })
+        }
+    }

static/js/chartIndex.js

@@ -7,15 +7,6 @@ $(function() {
 
 
 
-
-function handleReturn(output) {
-    return output;
-}
-
-
-
-
-
 function chartInit() {
     // Ticker 이름 가져오기
     // 해당 class의 text 가져오기
@@ -26,7 +17,7 @@ function chartInit() {
 
 
     // Javascript -> Flask (Python) -> Javascript
-    chart_data = sendAjax_async("/chart", {"ticker": ticker}, "json", handleReturn);
+    chart_data = sendAjax_sync("/chart", {"ticker": ticker}, "json", handle_one_return);
     console.log(chart_data);
     console.log(Object.keys(chart_data.Close));
 
@@ -44,8 +35,6 @@ function chartInit() {
     console.log("data : ", data);
 
 
-    
-    
 
 
     // Javascript chart.js candlestick
@@ -90,7 +79,7 @@ function chartInit() {
 
 
     // Javascript -> Flask (Python) -> Javascript
-    news = sendAjax_async(url="/news", data={"ticker": ticker}, dataType="json", handle=handleReturn);
+    news = sendAjax_sync(url="/news", data={"ticker": ticker}, dataType="json", handle=handle_one_return);
 
     news_table = document.querySelector('.table .news-table');
     // console.log(news_table.innerHTML);
@@ -177,70 +166,4 @@ function chartInit() {
 
         news_table.innerHTML = news_table.innerHTML + html;
     });
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/**
- * 
- * @param {string} url from javascript to flask(python) with route
- * @param {dictionary} data from javascript to flask(python) with data
- * @param {function} handle 큰 의미 없음
- */
-function sendAjax(url, data, handle) {
-    /*
-        jQuery.getJSON(url, [, data], [, success])
-
-        Load JSON-encoded data from the server using a GET HTTP request.
-    */
-
-    $.getJSON(url, data, 
-        function(response) {
-            handle(response.result);
-        });
-}
-
-
-/**
- * 
- * @param {string} url from javascript to flask(python) with route
- * @param {dictionary} data from javascript to flask(python) with data
- * @param {string} dataType The type of data that you're expecting back from the server. (ex. "json")
- * @param {function} handle 큰 의미 없음
- * @returns from flask(python) to javascript with data
- */
-function sendAjax_async(url, data, dataType, handle) {
-    /*
-        jQuery.ajax(url, [, settings])
-
-        jQuery.getJSON => Asynchronous (비동기식)
-        
-        Synchronous => 동기식 : 코드 순서대로 진행
-    */
-
-    var search_var;
-    console.log("Internal : sendAjax async");
-
-    $.ajax(url=url, settings={data: data, dataType: dataType, async: false,
-        success: function(response) {
-            console.log("Success : ", typeof response);
-            search_var = handle(response.result); // handle, 큰 의미 없음
-        }
-    });
-    
-    return search_var
-}
-
+}

static/js/index.js

@@ -13,7 +13,6 @@
 
 
 
-
 /*
     ".ready()"는 DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event 이다.
 
@@ -28,34 +27,61 @@
     ( 근데 여기서는 실행 문제 잘됨 )
 */
 
+
+
+
+
+
 // $(document).ready(function() { });
 $(function() {
-    console.log("Start debug !!");
+    var nasdaq_table_container_element = document.getElementById("nasdaq-table-container");
+    var chart_container_element = document.getElementById("chart-container");
+    var news_container_element = document.getElementById("news-container");
+    console.log(nasdaq_table_container_element, chart_container_element, news_container_element);
+
     
-    stocksInit();
-    // calendarInit();
+    // nasdaq_table_container_element.style.display = "block";
+    // chart_container_element.style.display = "none";
+    // news_container_element.style.display = "none";
+    // $("#news-container").hide();
+    // $("#news-container").show();
+
+
+    nasdaq_table_init();
 });
 
 
 
 
 
-function handleReturn(output) {
-    return output;
-}
 
 
 
-function stocksInit() {
+
+
+
+
+
+/**
+ * 
+ * 
+ * 
+ * 
+ */
+function nasdaq_table_init() {
+    // HTML 수정
+    $("#chart-container").hide();
+    $("#news-container").hide();
+
     // Javascript -> Flask (Python) -> Javascript
-    output = sendAjax_async("/stocks", {}, "json", handleReturn);
+    output = sendAjax_sync("/stocks", {}, "json", handle_one_return);
 
-    console.log("stocksInit() Output : ", output);
-    console.log(typeof output);
+    // console.log("stocksInit() Output : ", output);
+    // console.log(typeof output);
     
     // Ticker 길이 확인해보기
     var object_length = Object.keys(output.ticker).length;
-    console.log(object_length);
+    // console.log(object_length);
 
 
     // 랜더링 HTML 요소 생성
@@ -76,10 +102,10 @@ function stocksInit() {
         stocks.innerHTML = stocks.innerHTML + '<div class="stock industry">' + output.industry[i] + '</div>';
 
         // Add ticker's chart link
-        link = String('"/'.concat(output.ticker[i], '"'));
+        execution_function = String('"javascript:chartInit(\''.concat(output.ticker[i], '\');"'));
         stock = document.querySelectorAll('.stock.ticker')[i];
         stock.innerHTML = '';
-        stock.innerHTML = stock.innerHTML + '<a href='.concat(link, '>') + output.ticker[i] + '</a>';
+        stock.innerHTML = stock.innerHTML + '<a href='.concat(execution_function, '>') + output.ticker[i] + '</a>';
     }
 }
 
@@ -88,172 +114,362 @@ function stocksInit() {
 
 
 
-/**
- * 달력 렌더링 할 때 필요한 정보 목록
 
-    현재 월 (초기값 : 현재 시간)
-    금월 마지막일 날짜와 요일
-    전월 마지막일 날짜와 요일
+
+/**
+ * 
+ * 
+ * 
+ * 
+ * 
+ * 
+ * 
+ * 
  */
-function calendarInit() {
+function chartInit(ticker) {
+    // HTML 수정
+    $("#nasdaq-table-container").hide();
+    $("#chart-container").show();
+    $("#news-container").hide();
 
-    // 날짜 정보 가져오기
-    var date = new Date(); // 현재 날짜(로컬 기준) 가져오기
-    var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000); // utc 표준시 도출
-    var kstGap = 9 * 60 * 60 * 100; // 한국 kst 기준시간 더하기
-    var today = new Date(utc + kstGap); // 한국 시간으로 date 객체 만들기(오늘)
+    // ticker 이름 설정 (부제목 설정)
+    $('#chart-container .goticker .tickerName').text(ticker.concat(' Chart'));
 
-    console.log("Today : ", today)
+    // Javascript -> Flask (Python) -> Javascript
+    let [chart_data, news_articles] = sendAjax_sync_about_chartData_and_newsArticles("/chart", {"ticker": ticker}, "json", handle_two_return);
+    // console.log(chart_data, news_articles);
+    // console.log(chart_data);
+    // console.log(Object.keys(chart_data.Close));
+
+
+    // x축과 data 설정
+    // data: [{'x': date, 'o': open, 'h': high, 'l': low, 'c': close}, { }, { }, ... ]
+    data = [];
+    key_list = Object.keys(chart_data.Close);
+    for (var i=key_list.length-15; i<key_list.length; i++) {
+        key = key_list[i];
+        const [year, month, day] = key.split("-");
+        const x = new Date(parseInt(year), parseInt(month), parseInt(day), 9, 0, 0, 0).getTime();
+        data.push({'x': x, 'o': chart_data.Open[key].toFixed(2), 'h': chart_data.High[key].toFixed(2), 'l': chart_data.Low[key].toFixed(2), 'c': chart_data.Close[key].toFixed(2)})
+    }
+    // console.log("data : ", data);
 
-    // 달력에서 표기하는 날짜 객체
-    var thisMonth = new Date(today.getFullYear(), today.getMonth(), today.getDate());
 
-    var currentYear = thisMonth.getFullYear(); // 달력에서 표기하는 연
-    var currentMonth = thisMonth.getMonth(); // 달력에서 표기하는 월
-    var currentDate = thisMonth.getDate(); // 달력에서 표기하는 일
 
-    // kst 기준 현재시간
-    console.log("thisMonth");
-    console.log(currentYear);
-    console.log(currentMonth); // monthIndex
-    console.log(currentDate);
-    console.log(thisMonth);
 
-    // 캘린더 랜더���
-    renderCalender(thisMonth);
+    // Javascript chart.js candlestick
+    let mychart = document.getElementById('myChart');
+    new Chart(mychart, {
+        type: 'candlestick',
+        data: {
+            datasets: [{
+                label: 'CHRT - '.concat(ticker),
+                data: data
+            }]
+        }
+    });
 
 
-    ////////////////////////////////////////////////////////////////
 
-    function renderCalender(thisMonth, help=0) {
 
-        // 랜더링을 위한 데이터 정리
-        currentYear = thisMonth.getFullYear();
-        currentMonth = thisMonth = thisMonth.getMonth();
-        if (help != 1) {
-            // currentDate = thisMonth.getDate(); // 1 - 31 : 1 - 31
-            currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getDate();
-        }
 
-        // 이전 달의 마지막날 날짜와 요일 구하기
-        var startDay = new Date(currentYear, currentMonth, 0);
-        var prevDate = startDay.getDate(); // 1 - 31 : 1 - 31
-        var prevDay = startDay.getDay(); // Sunday - Saturday : 0 - 6
+    //////////////////////////////////////////////////////////////////
 
-        // 이번 달의 마지막날 날짜와 요일 구하기
-        var endDay = new Date(currentYear, currentMonth + 1 , 0);
-        var nextDate = endDay.getDate(); // 1 - 31 : 1 - 31
-        var nextDay = endDay.getDay(); // Sunday - Saturday : 0 - 6
+    // Javascript를 이용해 HTML에 동적으로 태그 추가
 
-        // console.log(prevDate, prevDay, nextDate, nextDay, currentMonth);
+    // a 태그 onclick 적용
+    execution_function = String('javascript:chartInit(\''.concat(ticker, '\');'));
+    const goTicker = document.querySelector('.goticker');
+    goTicker.setAttribute('href', execution_function);
 
-        // 현재 월 표기
-        $('.year-month').text(currentYear + '.' + (currentMonth + 1));
+    //////////////////////////////////////////////////////////////////
 
-        // 랜더링 html 요소 생성
-        calendar = document.querySelector('.dates')
-        calendar.innerHTML = '';
 
-        // 지난달
-        for (var i = prevDate - prevDay + 1; i <= prevDate; i++) {
-            calendar.innerHTML = calendar.innerHTML + '<div class="day prev disable">' + i + '</div>'
-        }
 
-        // 이번달
-        for (var i = 1; i <= nextDate; i++) {
-            calendar.innerHTML = calendar.innerHTML + '<div class="day current">' + i + '</div>'
-        }
 
-        // 다음달
-        for (var i = 1; i <= (7 - nextDay == 7 ? 0 : 7 - nextDay); i++) {
-            calendar.innerHTML = calendar.innerHTML + '<div class="day next disable">' + i + '</div>'
-        }
 
-        // 오늘 날짜 표기
-        if (today.getMonth() == currentMonth) {
-            todayDate = today.getDate();
-            var currentMonthDate = document.querySelectorAll('.dates .current'); // 중간 띄어쓰기 주의
-            // var currentMonthDate = document.querySelectorAll('div.day.current'); // 같은 의미
+    //////////////////////////////////////////////////////////////////
 
-            // console.log(currentMonthDate)
-            currentMonthDate[todayDate-1].classList.add('today');
-        }
+    // table title 표시
+    // 해당 class의 text 집어넣기
+    const table_title = document.querySelector('.table-title');
+    $('.table .table-title').text(ticker.concat(' News'));
 
-        // 이전달로 이동
-        $('.go-prev').on('click', function() {
-            if (help == 0) {
-                thisMonth = new Date(currentYear, currentMonth - 1, 1);
-                renderCalender(thisMonth, 1);
-            }
-            else {
-                renderCalender(thisMonth, 1);
-            }
-        })
 
-        // 다음달로 이동
-        $('.go-next').on('click', function() {
-            if (help == 0) {
-                thisMonth = new Date(currentYear, currentMonth + 1, 1);
-                renderCalender(thisMonth, 1);
-            }
-            else {
-                renderCalender(thisMonth, 1);
-            }
-        })
-    }
-}
 
+    news_table = document.querySelector('.table .news-table');
+    // console.log(news_table.innerHTML);
 
 
+    // console.log(news);
+    // console.log(Object.keys(news)); // key 배열 만들기
+    // console.log(typeof Object.keys(news));
 
 
 
-/**
- * 
- * @param {string} url from javascript to flask(python) with route
- * @param {dictionary} data from javascript to flask(python) with data
- * @param {function} handle 큰 의미 없음
- */
-function sendAjax(url, data, handle) {
-    /*
-        jQuery.getJSON(url, [, data], [, success])
 
-        Load JSON-encoded data from the server using a GET HTTP request.
+    /* 
+        [ 날짜 정렬 ]
+        "news"에서 index에 대해서 정렬을 하고 reduce() 함수를 적용.
+
+        reduce() : 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환
     */
+    sorted_news = {}
+    sorted_news = Object.keys(news_articles).sort(function (a, b) {
+        if (a < b) { return 1; }
+        else if (a > b) { return -1; }
+        else { return 0; }
+    }).reduce((sorted_news, key) => {
+        sorted_news[key] = news_articles[key];
+        return sorted_news;
+    }, {});
+    // console.log(sorted_news);
+
+    var key_list = Object.keys(chart_data.Open);
+    var open_list = Object.values(chart_data.Open);
+    var close_list = Object.values(chart_data.Close);
+
+    for (var i=0; i<key_list.length; i++) {
+        const [year, month, day] = key_list[i].split("-");
+        key_list[i] = year + '.' + month + '.' + day;
+    }
+    // console.log(key_list);
+
+    // List 안의 value를 뽑을 때, (Python) => for item in list:
+    Object.keys(sorted_news).forEach(key => {
+        var idx = key_list.indexOf(String(key));
+
+        if (idx != -1) { var diff = ((open_list[idx]-close_list[idx-1])/(open_list[idx]) * 100.0).toFixed(2); }
+        else { var diff = '.'; }
+
+        if (diff == '.') {
+            var diff_html = '<th class="news diff">' + diff + '</th>';
+        }
+        else if (diff > 0) {
+            var diff_html = '<th class="news diff up">+' + diff + ' %</th>';
+        }
+        else {
+            var diff_html = '<th class="news diff down">' + diff + ' %</th>';
+        }
+        var html = '<tr align="center" bgcolor="white"><th>+</th><th>' + key + '</th>' + diff_html + '<td style="text-align: left;">';
+
+        for (var i = 0; i < sorted_news[key].length; i++) {
+            var title = sorted_news[key][i].substring(0, sorted_news[key][i].length-4);
+            var sendTitle = title; // Javascript -> Python 보내기 위한 title
+            console.log("title : ", title);
+
+            
+            // title에서 & 표시가 있을 수 있음.
+            // Title 에서 '&'로 표시되어 있는데 따로 구별해야 된다.
+            // andSymbolInTitle 에서 가져온 '&' 위치 index를 title과 합쳐준다.
+            andSymbolInTitle = [];
+            let idx = 0;
+            // title = "asdf&asdf&AS&DF&&";
+            // sendTitle = title;
+
+            while (true) {
+                idx = sendTitle.indexOf('&', idx);
+                if (idx == -1) { break; }
+                sendTitle = sendTitle.substring(0, idx) + sendTitle.substring(idx+1, sendTitle.length);
+                // console.log(sendTitle);
+                andSymbolInTitle.push(idx + andSymbolInTitle.length);
+            }
+            // console.log("title : ", title);
+            // console.log("sendTitle : ", sendTitle);
+            // console.log("andSymbolInTitle : ", andSymbolInTitle);
+
+            var link = String('"/info?ticker='.concat(ticker, '&date=', key, '&title=', sendTitle, '&andSymbolInTitle=', andSymbolInTitle, '"'));
+            // console.log(link);
+            
+            var execution_function = String(`javascript:newsInit(\'${ticker}\',\'${key}\',\'${sendTitle}\',\'${andSymbolInTitle}\');`);
+            // console.log("execution_function : ", execution_function);
+            html = html + '<a href=' + link + '>' + title + '</a><br>';
+        }
+        html = html + '</td>';
 
-    $.getJSON(url, data, 
-        function(response) {
-            handle(response.result);
-        });
+        news_table.innerHTML = news_table.innerHTML + html;
+    });
 }
 
 
+
+
+
+
+
+
+
 /**
  * 
- * @param {string} url from javascript to flask(python) with route
- * @param {dictionary} data from javascript to flask(python) with data
- * @param {string} dataType The type of data that you're expecting back from the server. (ex. "json")
- * @param {function} handle 큰 의미 없음
- * @returns from flask(python) to javascript with data
+ * 
+ * 
+ * 
+ * 
+ * 
+ * 
+ * 
+ * 
+ * 
  */
-function sendAjax_async(url, data, dataType, handle) {
-    /*
-        jQuery.ajax(url, [, settings])
+function newsInit(ticker1, date1, title1, andSymbolInTitle1) {
+    console.log("newsInit start");
+    // HTML 수정
+    $("#nasdaq-table-container").hide();
+    $("#chart-container").hide();
+    $("#news-container").show();
+
+    spaceIndex_inTitle = andSymbolInTitle1.split(',');
+    var list_length = spaceIndex_inTitle.length;
+    for (var i=0; i<list_length; i++) {
+        title1 = title1.substring(0, i) + ' ' + title1.substring(i, title1.length);
+    }
+
+    console.log(ticker1);
+    console.log(date1);
+    console.log(title1);
+    console.log(andSymbolInTitle1);
+
+
+
+    //////////////////////////////////////////////////////////////////////
+    
+    // Javascript를 이용해 HTML에 동적으로 태그 추가
+
 
-        jQuery.getJSON => Asynchronous (비동기식)
-        
-        Synchronous => 동기식 : 코드 순서대로 진행
-    */
 
-    var search_var;
-    console.log("Internal : sendAjax async");
+    // a 태그 onclick 적용
+    execution_function = String('javascript:chartInit(\''.concat(ticker, '\');'));
+    const goTicker = document.querySelector('.goticker');
+    goTicker.setAttribute('href', execution_function);
 
-    $.ajax(url=url, settings={data: data, dataType: dataType, async: false,
-        success: function(response) {
-            console.log("Success : ", typeof response);
-            search_var = handle(response.result); // handle, 큰 의미 없음
+
+    // a 태그에 URL 적용
+    const addURL = document.querySelector('.NewsURL .input-News-URL');
+    addURL.setAttribute('href', url);
+
+
+    // 모델에서 질문 예시 Ticker에 알맞게 작성하기
+    const example_value = document.querySelector('#model .text-form #text-input');
+    example = "Why did " + ticker + "'s stock go down?";
+    example_value.setAttribute('value', example);
+
+
+    //////////////////////////////////////////////////////////////////////
+    // NER 관련
+
+    ents = sendAjax_sync('/ner', {'ticker': ticker, 'date': date, 'title': title}, dataType="json", handle=handle_one_return);
+    // ents = {'text': [], 'start_char': [], 'end_char': [], 'label_': [], 'news': []}
+    console.log(ents);
+
+    let news = ents['news'];
+    let numOfNER = ents['text'].length;
+
+
+    // 랜더링 html 요소 생성
+    news_ner = document.querySelector('.entities');
+    news_ner.innerHTML = '';
+
+    for (i=0; i<numOfNER-1; i++) {
+        start_idx = (i == 0) ? 0 : ents['end_char'][i-1];
+        end_idx = ents['start_char'][i];
+        last_idx = ents['end_char'][i];
+
+        label = ents['label_'][i];
+        if (label == 'ORG') { class_name = "entity_org"; }
+        else if (label == 'PERSON') { class_name = "entity_person"; }
+        else if (label == 'FAC') { class_name = "entity_fac"; }
+        else if (label == 'GPE') { class_name = "entity_gpe"; }
+        else if (label == 'PRODUCT') { class_name = "entity_product"; }
+        else { console.log("[ Error !!! - New NER label_ ] : ", ents['label_'][i], ents['text'][i]); class_name = "none"; }
+
+        news_ner.innerHTML = news_ner.innerHTML + news.substring(start_idx, end_idx);
+        news_ner.innerHTML = news_ner.innerHTML + '<mark class=' + class_name
+            + ' style="line-height: 1;">'
+            + news.substring(end_idx, last_idx) 
+            + '<span class="show-label" style="font-size: 0.8em; font-weight: bold; line-height: 1; border-radius: 0.35em; vertical-align: middle; margin-left: 0.5rem">'
+            + label + '</span></mark>';
+    }
+    news_ner.innerHTML = news_ner.innerHTML + news.substring(ents['end_char'][numOfNER-1]);
+    
+
+
+
+    //////////////////////////////////////////////////////////////////////
+    // 모델 적용 내용 ( Submit )
+
+    var sendTitle = title; // Javascript -> Python 보내기 위한 title
+
+            
+    // title에서 & 표시가 있을 수 있음.
+    // Title 에서 '&'로 표시되어 있는데 따로 구별해야 된다.
+    // andSymbolInTitle 에서 가져온 '&' 위치 index를 title과 합쳐준다.
+    andSymbolInTitle = [];
+    let idx = 0;
+    // title = "asdf&asdf&AS&DF&&";
+    // sendTitle = title;
+
+    while (true) {
+        idx = sendTitle.indexOf('&', idx);
+        if (idx == -1) { break; }
+        sendTitle = sendTitle.substring(0, idx) + sendTitle.substring(idx+1, sendTitle.length);
+        console.log(sendTitle);
+        andSymbolInTitle.push(idx + andSymbolInTitle.length);
+    }
+
+    console.log(andSymbolInTitle);
+    console.log("Last String", sendTitle);
+
+
+
+    // function 앞에 "async"를 붙이면 해당 함수는 항상 프라미스를 반환한다.
+    const translateText = async (text) => {
+        // 목적 : Flask에 input을 보내주고 output을 받아오는 과정
+        console.log("Start translateText async");
+
+        // "await"는 "async" 함수 안에서만 동작한다.
+        // "await" 키워드를 만나면 Promise가 처리될 때까지 기다린다.
+        // Promise가 처리되길 기다리는 동안엔 엔진이 다른일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.
+        const inferResponse = await fetch(`newsQuestions?ticker=${ticker}&date=${date}&title=${sendTitle}&andSymbolInTitle=${andSymbolInTitle}&questions=${text}`); // Javascript -> Flask(python)
+        
+        // console.log("inferResponse : ", inferResponse);
+
+        const inferJson = await inferResponse.json(); // Flask(python) -> Javascript
+
+        // console.log(inferJson);
+        return inferJson.result['answer'];
+    };
+
+
+    /* 모델 Submit button 관련 내용 */
+    // form 태그의 class 이름
+    const textForm = document.querySelector('.text-form');
+
+
+    // addEventListener(type, listener)
+    // addEventListener(type, listener, options)
+    // addEventListener(type, listener, useCapture)
+    textForm.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        // console.log(event);
+
+        // html -> javascript : input 받아와서 output 보내기
+        const textInput = document.getElementById('text-input');
+        const textParagraph = document.querySelector('.text-output');
+
+        console.log("textInput : ", textInput, textInput.value);
+        try {
+            // sendAjax("/inference", {"input_text" : textInput.value}, handleOutput);
+            
+            // "await"는 "async" 함수 안에서만 동작한다.
+            // "await" 키워드를 만나면 Promise가 처리될 때까지 기다린다.
+            // Promise가 처리되길 기다리는 동안엔 엔진이 다른일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.
+            const answer = await translateText(textInput.value); // Flask에 input을 보내주고 output을 받아오는 과정
+            
+            console.log("Answer : ", answer);
+            textParagraph.textContent = answer;
+        } catch (err) {
+            console.error(err);
         }
     });
-    
-    return search_var
 }
+

static/js/news.js

@@ -54,7 +54,7 @@ function newsInit() {
     //////////////////////////////////////////////////////////////////////
     // NER 관련
 
-    ents = sendAjax_async('/ner', {'ticker': ticker, 'date': date, 'title': title}, dataType="json", handle=handleReturn);
+    ents = sendAjax_sync('/ner', {'ticker': ticker, 'date': date, 'title': title}, dataType="json", handle=handle_one_return);
     // ents = {'text': [], 'start_char': [], 'end_char': [], 'label_': [], 'news': []}
     console.log(ents);
 
@@ -81,7 +81,7 @@ function newsInit() {
 
         news_ner.innerHTML = news_ner.innerHTML + news.substring(start_idx, end_idx);
         news_ner.innerHTML = news_ner.innerHTML + '<mark class=' + class_name
-            + ' style="margin: 0 0.25em; line-height: 1;">'
+            + ' style="line-height: 1;">'
             + news.substring(end_idx, last_idx) 
             + '<span class="show-label" style="font-size: 0.8em; font-weight: bold; line-height: 1; border-radius: 0.35em; vertical-align: middle; margin-left: 0.5rem">'
             + label + '</span></mark>';
@@ -159,6 +159,7 @@ function newsInit() {
 
         // html -> javascript : input 받아와서 output 보내기
         const textInput = document.getElementById('text-input');
+        console.log("element : ", textInput);
         const textParagraph = document.querySelector('.text-output');
 
         console.log("textInput : ", textInput, textInput.value);
@@ -176,79 +177,6 @@ function newsInit() {
             console.error(err);
         }
     });
-
-
-
-
-
-
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/**
- * 
- * @param {string} url from javascript to flask(python) with route
- * @param {dictionary} data from javascript to flask(python) with data
- * @param {function} handle 큰 의미 없음
- */
-function sendAjax(url, data, handle) {
-    /*
-        jQuery.getJSON(url, [, data], [, success])
-
-        Load JSON-encoded data from the server using a GET HTTP request.
-    */
-
-    $.getJSON(url, data, 
-        function(response) {
-            handle(response.result);
-        });
 }
 
 
-/**
- * 
- * @param {string} url from javascript to flask(python) with route
- * @param {dictionary} data from javascript to flask(python) with data
- * @param {string} dataType The type of data that you're expecting back from the server. (ex. "json")
- * @param {function} handle 큰 의미 없음
- * @returns from flask(python) to javascript with data
- */
-function sendAjax_async(url, data, dataType, handle) {
-    /*
-        jQuery.ajax(url, [, settings])
-
-        jQuery.getJSON => Asynchronous (비동기식)
-        
-        Synchronous => 동기식 : 코드 순서대로 진행
-    */
-
-    var search_var;
-    console.log("Internal : sendAjax async");
-
-    $.ajax(url=url, settings={data: data, dataType: dataType, async: false,
-        success: function(response) {
-            console.log("Success : ", typeof response);
-            search_var = handle(response.result); // handle, 큰 의미 없음
-        }
-    });
-    
-    return search_var
-}
-
-
-
-function handleReturn(output) {
-    return output;
-}

static/js/utils.js

@@ -0,0 +1,89 @@
+/**
+ * helper functions defined
+ */
+
+function handle_one_return(output) {
+    return output;
+}
+function handle_two_return(output1, output2) {
+    return [output1, output2];
+}
+
+
+
+/**
+ * 
+ * @param {string} url from javascript to flask(python) with route
+ * @param {dictionary} data from javascript to flask(python) with data
+ * @param {function} handle 큰 의미 없음
+ */
+function sendAjax(url, data, handle) {
+    /*
+        jQuery.getJSON(url, [, data], [, success])
+
+        Load JSON-encoded data from the server using a GET HTTP request.
+    */
+
+    $.getJSON(url, data, 
+        function(response) {
+            handle(response.result);
+        }
+    );
+}
+
+
+/**
+ * 
+ * @param {string} url from javascript to flask(python) with route
+ * @param {dictionary} data from javascript to flask(python) with data
+ * @param {string} dataType The type of data that you're expecting back from the server. (ex. "json")
+ * @param {function} handle 큰 의미 없음
+ * @returns from flask(python) to javascript with data
+ */
+function sendAjax_sync(url, data, dataType, handle) {
+    /*
+        jQuery.ajax(url, [, settings])
+
+        jQuery.getJSON => Asynchronous (비동기식)
+        
+        Synchronous => 동기식 : 코드 순서대로 진행
+    */
+    var search_var;
+    $.ajax(url=url, settings={data: data, dataType: dataType, async: false,
+        success: function(response) {
+            search_var = handle(response.result); // handle, 큰 의미 없음
+        }
+    });
+    
+    return search_var
+}
+
+
+
+/**
+ * 
+ * @param {string} url from javascript to flask(python) with route
+ * @param {dictionary} data from javascript to flask(python) with data
+ * @param {string} dataType The type of data that you're expecting back from the server. (ex. "json")
+ * @param {function} handle 큰 의미 없음
+ * @returns from flask(python) to javascript with data
+ */
+function sendAjax_sync_about_chartData_and_newsArticles(url, data, dataType, handle) {
+    /*
+        jQuery.ajax(url, [, settings])
+
+        jQuery.getJSON => Asynchronous (비동기식)
+        
+        Synchronous => 동기식 : 코드 순서대로 진행
+    */
+    var chart_data;
+    var news_articles;
+    $.ajax(url=url, settings={data: data, dataType: dataType, async: false,
+        success: function(response) {
+            [chart_data, news_articles] = handle(response.chart_data, response.news_articles); // handle, 큰 의미 없음
+        }
+    });
+    
+    return [chart_data, news_articles];
+}
+

templates/chart.html

@@ -13,66 +13,18 @@
         <!-- jQuery -->
         <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
         <!-- script 태그 : 외부 js 파일을 연결하거나 javascript 코드를 입력할 때 사용 -->
+        <script type="text/javascript" src="static/js/utils.js"></script>
         <script type="text/javascript" src="static/js/chartIndex.js"></script>
 
 
 
 
 
-
-
-        <!-- Recharts -->
-        <!-- <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
-        <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
-
-        <script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
-        <script src="https://unpkg.com/recharts/umd/Recharts.js"></script> -->
-
-        <!-- <script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script> -->
-
-
-
-
-
-
         <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
 		<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
 		<script src="static/js/chartjs-chart-financial.js" type="text/javascript"></script>
 
-
-
-
-        <!-- 보류 모르겠음 ... -->
-
-        <!-- ========================================================================================= -->
-
-
-        <!-- Include Chart.js from a CDN -->
-
-        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"></script> -->
-        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.js"></script> -->
-        <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
-
-
-        <!-- <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
-		<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.js"></script>
-		<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
-
-
-        <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
-		<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.js"></script>
-		<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
-
-		<script src="https://www.chartjs.org/chartjs-chart-financial/chartjs-chart-financial.js"></script> -->
-
-
-        
-        <!--
-            CDN : Content Delivery Network
-            지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 '콘텐츠 전송 기술을 의미'
-            서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다.
-        -->
     </head>
 
 

templates/index.html

@@ -12,43 +12,186 @@
         <link rel="stylesheet" href="static/css/style.css" />
 
         <!-- jQuery -->
-        <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
+        <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
         <!-- script 태그 : 외부 js 파일을 연결하거나 javascript 코드를 입력할 때 사용 -->
+        <script type="text/javascript" src="static/js/utils.js"></script>
         <script type="text/javascript" src="static/js/index.js"></script>
 
+
+
+        <!-- Draw Chart Library -->
+        <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
+		<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
+		<script src="static/js/chartjs-chart-financial.js" type="text/javascript"></script>
     </head>
 
 
 
+    <!-- [ id class 차이 ] -->
+    <!-- id : 한 문서에 단 하나의 요소에만 적용(중복X) -->
+    <!-- id : 특정 요소에 이름을 붙이는데 사용 -->
+    <!-- class : 동일한 값을 갖는 요소 많음 -->
+    <!-- class : 스타일의 분류에 사용 -->
+
+
+
 
     <!-- body 태그 : 본문에 해당하는 부분, 실제 보여지는 화면에 해당 -->
     <body>
-        <h1><a class="gohome" href="" onclick="sendAjax('/', undefined, undefined);"> Stock News NER & Analysis </a></h1>
-        <p id='embed'>{{embed}}</p>
 
-        <p id='mylog'/>
+        <!-- block = show, none = hide -->
+        <div id="nasdaq-table-container" style="display: block">
+            <h1><a class="gohome" style="text-decoration: none;" href="" onclick="sendAjax('/', undefined, undefined);"> Stock News NER & Analysis </a></h1>
+            <p id='embed'>{{embed}}</p>
+
+            <p id='mylog' />
+
+            <div class="stocks_wrap">
+                <div class="stocks_columns">
+                    <div class="column ticker">Ticker</div>
+                    <div class="column name">Name</div>
+                    <div class="column dff">Diff</div>
+                    <div class="column open">Open</div>
+                    <div class="column close">Close</div>
+                    <div class="column sector">Sector</div>
+                    <div class="column industry">Industry</div>
+                </div>
+
+                <div class="stocks"></div>
+            </div>
+        </div>
         
 
-        <!-- [ id class 차이 ] -->
-        <!-- id : 한 문서에 단 하나의 요소에만 적용(중복X) -->
-        <!-- id : 특정 요소에 이름을 붙이는데 사용 -->
-        <!-- class : 동일한 값을 갖는 요소 많음 -->
-        <!-- class : 스타일의 분류에 사용 -->
-
-
-        <div class="stocks_wrap">
-            <div class="stocks_columns">
-                <div class="column ticker">Ticker</div>
-                <div class="column name">Name</div>
-                <div class="column dff">Diff</div>
-                <div class="column open">Open</div>
-                <div class="column close">Close</div>
-                <div class="column sector">Sector</div>
-                <div class="column industry">Industry</div>
+
+        <!-- block = show, none = hide -->
+        <div id="chart-container" style="display: block">
+            <h1><a class="gohome" style="text-decoration: none;" href="/">Stock News Summaries AI</a></h1>
+            <a class="goticker" style="text-decoration: none;"><h2 class="tickerName"></h2></a>
+
+            <div>
+                <div id="chart-container" width="974" height="486"></div>
+
+                <div class="myChart-container">
+                    <canvas id="myChart"></canvas>
+                </div>
+
             </div>
 
-            <div class="stocks"></div>
+            <!--
+                [ 속성 ]
+
+                align : 정렬을 지정한다. (left, center, right)
+                border : 테두리 선의 두께를 지정한다.
+                bgcolor : 배경색을 지정한다. (색은 "red", "black" 처럼 기존의 정의되어있는 색을 사용할 수도 있으며
+                            rgb형식의 #000000 으로도 색을 지정할 수 있다.)
+                bordercolor : 테두리 선의 색을 지정한다. 색을 지정하는 방법은 bgcolor와 동일하다.
+                cellspacing : 셀간의 간격을 지정한다.
+                width : 가로 길이를 지정한다. (상수 값을 입력할 수도, % 단위로 입력할 수 있다.
+                        %를 사용할 때는 웹브라우저 크기에 대한 % 이다.)
+                height : 세로 길이를 지정한다.
+                rawspan : 지정한 값만큼 행을 병합한다. (위아래로)
+                colspan : 지정한 값만큼 열을 병합한다. (좌우로)
+            -->
+
+            
+            <!-- table 태그 : 테이블을 만든다. -->
+            <table class="table"
+
+                text-align="center"
+                align-items="center"
+                justify-content="center"
+
+                border="1"
+                width="90%"
+                height="200"
+                cellspacing="5">
+
+
+                <!-- caption 태그 : 테이블 이름 표시 -->
+                <caption class="table-title"></caption>
+
+                <!-- 테이블의 헤더 영역 지정 -->
+                <thread>
+                    <!-- tr 태그 : 테이블읠 행(가로 한줄)을 만든다. -->
+                    <tr align="center" bgcolor="white">
+                        <!-- td 태그 : 테이블의 열을 만든다. -->
+                        <td width="5%"></td>
+
+                        <!-- th 태그 : 테이블(표)의 헤드 부분(자동으로 가운데 정렬, 굵게 적용) -->
+                        <th width="10%">Date</th>
+                        <th width="10%">Diff</th>
+                        <th class="title-width">Articles</th>
+                    </tr>
+                </thread>
+
+                <!-- tbody 태그 : -->
+                <tbody class="news-table">
+                    <!-- News: Date, Diff, Title 추가 -->
+                </tbody>
+
+            </table>
+        </div>
+
+
+
+        <!-- block = show, none = hide -->
+        <div id="news-container" style="display: block">
+            <h1><a class="gohome" style="text-decoration: none;" href="/">Stock News Summaries AI</a></h1>
+            <a class="goticker" style="text-decoration: none;"><h2 class="tickerName">{{embed1}}</h2></a>
+            <h3 class="titleDate">{{embed2}}</h2>
+            <h3 class="titleName">{{embed3}}</h2>
+            <h3 class="NewsURL">URL: <a class="input-News-URL" target=”_blank”>{{embed4}}</a></h2>
+
+            <!-- named entity recognition (NER) -->
+            <figure style="margin-bottom: 6rem">
+                <div class="entities" style="line-height: 2.5; direction: ltr">
+                
+                </div>
+            </figure>
+
+
+            <!-- section 태그 : HTML 문서에 포함된 독립적인 섹션을 정의할 때 사용 -->
+            <section id="model">
+                <h2>Questions about Stock's News</h2>
+
+                <!-- p 태그 : paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 사용 -->
+                <p>
+                    Model : 
+
+                    <!-- target="_blank" : 기본속성 중 하나로 클릭시 계속해서 새로운 창이 열리게 된다. -->
+                    <a 
+                        href="https://huggingface.co/allenai/tk-instruct-base-def-pos"
+                        rel="noeferrer"
+                        target="_blank">Tk-instruct Model</a
+                    >
+                </p>
+
+
+                <!-- form 태그 : 데이터를 전송하기 위한 태그 -->
+                <!-- form 태그 : 데이터를 전송할 url (action 속성) -->
+                <!-- form 태그 : 데이터 전달 방식이 get인지 post인지 결정 (method 속성) -->
+                <form class="text-form">
+
+                    <!-- label 태그는 for 속성을 사용해서 input 태그의 id 속성에 연계해서 사용 -->
+                    <label for="text-input">[ Questions ]</label> <br>
+                    <input
+                        id="text-input"
+                        type="text"
+                        placeholder="Input Questions"
+                        value="Why did Alphabet's stock go down?"
+                    />
+
+                    <button id="text-submit">Submit</button>
+                    <p> [ Answer ] </p>
+                    <p class="text-output"></p>
+                </form>
+
+            </section>
         </div>
 
+
+
+
     </body>
 </html>

templates/news_analysis.html

@@ -1,88 +0,0 @@
-<!-- html 태그 : HTML로 작성되어 있다는 것을 알려줌 -->
-<!-- html 태그 : html 파일 전체를 감싸는 태그 -->
-<html>
-    <!-- head 태그 : 머리말에 해당 -->
-    <!-- head 태그 : css나 javascript를 연결해줌 -->
-    <!-- head 태그 : 파비콘이나 문자열 인코딩과 같은 문서의 다양한 정보를 제공 -->
-    <head>
-
-        <!-- link 태그 : 주로 외부 css 파일을 연결할 때 사용 -->
-        <link rel="stylesheet" href="static/css/news.css" />
-
-        <!-- jQuery -->
-        <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
-        <!-- script 태그 : 외부 js 파일을 연결하거나 javascript 코드를 입력할 때 사용 -->
-        <script type="text/javascript" src="static/js/news.js"></script>
-    
-    
-    </head>
-
-
-
-    <!-- body 태그 : 본문에 해당하는 부분, 실제 보여지는 화면에 해당 -->
-    <body>
-        <h1><a class="gohome" href="/">Stock News Summaries AI</a></h1>
-        <a class="goticker"><h2 class="tickerName">{{embed1}}</h2></a>
-        <h3 class="titleDate">{{embed2}}</h2>
-        <h3 class="titleName">{{embed3}}</h2>
-        <h3 class="NewsURL">URL: <a class="input-News-URL" target=”_blank”>{{embed4}}</a></h2>
-
-
-
-        <!-- named entity recognition (NER) -->
-        <figure style="margin-bottom: 6rem">
-            <div class="entities" style="line-height: 2.5; direction: ltr">
-            
-            </div>
-        </figure>
-
-
-
-
-        <!-- section 태그 : HTML 문서에 포함된 독립적인 섹션을 정의할 때 사용 -->
-        <section id="model">
-            <h2>Questions about Stock's News</h2>
-
-            <!-- p 태그 : paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 사용 -->
-            <p>
-                Model : 
-
-                <!-- target="_blank" : 기본속성 중 하나로 클릭시 계속해서 새로운 창이 열리게 된다. -->
-                <a 
-                    href="https://huggingface.co/allenai/tk-instruct-base-def-pos"
-                    rel="noeferrer"
-                    target="_blank">Tk-instruct Model</a
-                >
-            </p>
-
-
-            <!-- form 태그 : 데이터를 전송하기 위한 태그 -->
-            <!-- form 태그 : 데이터를 전송할 url (action 속성) -->
-            <!-- form 태그 : 데이터 전달 방식이 get인지 post인지 결정 (method 속성) -->
-            <form class="text-form">
-
-                <!-- label 태그는 for 속성을 사용해서 input 태그의 id 속성에 연계해서 사용 -->
-                <label for="text-input">[ Questions ]</label> <br>
-                <input
-                    id="text-input"
-                    type="text"
-                    placeholder="Input Questions"
-                    value="Why did Alphabet's stock go down?"
-                />
-
-                <button id="text-submit">Submit</button>
-                <p> [ Answer ] </p>
-                <p class="text-output"></p>
-            </form>
-
-        </section>
-
-
-
-
-
-    </body>
-
-
-
-</html>