<!DOCTYPE html>
<html>
<head>
<title>ChatDev</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script src="static/js/main.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-okaidia.min.css">
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/monokai-sublime.min.css">
<script>
hljs.initHighlightingOnLoad();
</script>
</head>
<body style="margin: 120px; background-color: rgb(41, 41, 41);">
<div class="d-flex justify-content-center">
<img src="static/figures/title.png" alt="ChatDev Title" id="title-image" style="width: 100%; max-width: 500px;">
</div>
<main class="container" id="form" style="width: auto; height: 58%; background-color:rgb(97, 97, 92); font-size: 24px; overflow: hidden; border-radius: 1rem; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-weight: bolder; text-shadow: 0px 0px 0px rgb(252, 252, 252); color: aliceblue;">
<form action="https://ennet-chatdev.hf.space/download" method="post">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<label for="api_key">What is your OpenAI API key?</label>
<input name="api_key" id="api_key" placeholder="sk-xxx" style="width:800px; font-size: 68%;" required/>
<label for="task">What is your task name?</label>
<input name="task" id="task" placeholder="Develop a basic Gomoku game." style="width:800px; font-size: 68%;" required/>
<label for="config">Choose software type you want?</label>
<select name="config" id="config" style="width:800px; font-size: 68%; height: 30px;" required>
<option value="Default">Without images</option>
<option value="Art">With generated images</option>
</select>
<!-- <input name="config" id="config" placeholder="Default" style="width:600px" /> -->
<button style="margin: 20px; border-radius: 0.5rem; font-weight: bolder; text-shadow: 0px 0px 0px rgb(252, 252, 252); color: aliceblue; background-color: rgb(58, 58, 218);">Get Started</button>
</div>
</form>
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<label for="config">Click after the Chief Product Officer send manual:</label>
<a href="/Outputs.zip" download="Outputs.zip">
<button margin: style="margin:20px; border-radius: 0.5rem; font-weight: bolder; text-shadow: 0px 0px 0px rgb(252, 252, 252); color: aliceblue; background-color: rgb(226, 67, 160);">Download</button>
</a>
</div>
</main>
<div class="container d-flex flex-column" id="chat-box" style="background-color: rgb(97, 97, 92); border-radius: 1rem"></div>
<script>
var container = document.getElementById("chat-box");
container.scrollTop = container.scrollHeight;
</script>
<!-- <div style="display: flex; width:auto;justify-content: center;align-items: center;">
<div style="width: 30%;">
<br>
<a href="static/chain_visualizer.html">
<button>ChatChain Visualizer</button>
</a>
</div>
<div>
<br>
<a href="static/replay.html">
<button>Chat Replay</button>
</a>
</div>
</div> -->
<script src="static/js/main.js"></script>
</body>
<!-- <script>
$('button').click(function () {
$(this).attr('disabled', 1);
});
</script> -->
</html>