Spaces:

mdj1412
/

stock_news_summaries_AI

Runtime error

stock_news_summaries_AI / templates /index.html

mdj1412

complete

4a5c163 almost 2 years ago

7.89 kB

	<!-- html 태그 : HTML로 작성되어 있다는 것을 알려줌 -->
	<!-- html 태그 : html 파일 전체를 감싸는 태그 -->
	<html>


	<!-- head 태그 : 머리말에 해당 -->
	<!-- head 태그 : css나 javascript를 연결해줌 -->
	<!-- head 태그 : 파비콘이나 문자열 인코딩과 같은 문서의 다양한 정보를 제공 -->
	<head>

	<!-- link 태그 : 주로 외부 css 파일을 연결할 때 사용 -->
	<link rel="stylesheet" href="static/css/style.css" />

	<!-- jQuery -->
	<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>

	<!-- 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>



	<!-- 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>

	<!--
	[ 속성 ]

	align : 정렬을 지정한다. (left, center, right)
	border : 테두리 선의 두께를 지정한다.
	bgcolor : 배경색을 지정한다. (색은 "red", "black" 처럼 기존의 정의되어있는 색을 사용할 수도 있으며
	rgb형식의 #000000 으로도 색을 지정할 수 있다.)
	bordercolor : 테두리 선의 색을 지정한다. 색을 지정하는 방법은 bgcolor와 동일하다.
	cellspacing : 셀간의 간격을 지정한다.
	width : 가로 길이를 지정한다. (상수 값을 입력할 수도, % 단위로 입력할 수 있다.
	%를 사용할 때는 웹브라우저 크기에 대한 % 이다.)
	height : 세로 길이를 지정한다.
	rawspan : 지정한 값만큼 행을 병합한다. (위아래로)
	colspan : 지정한 값만큼 열을 병합한다. (좌우로)
	-->


	<!-- table 태그 : 테이블을 만든다. -->
	<table class="table"

	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"></h2></a>
	<h3 class="titleDate"></h2>
	<h3 class="titleName"></h2>
	<h3 class="newsURL"><a class="input-News-URL" target=”_blank”></a></h2>

	<!-- named entity recognition (NER) -->
	<figure style="margin-bottom: 6rem">
	<div class="entities" style="line-height: 1.3; 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>