Spaces:
Sleeping
Sleeping
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="description" content="Chat with deepseek-coder-1.3b"> | |
<meta name="viewport" content="width=device-width, height=device-height"> | |
<title>OpenAI Chat with Alpine.js</title> | |
<link rel="stylesheet" href="assets/css/style.css"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"> | |
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.10/dist/cdn.min.js"></script> | |
</head> | |
<body> | |
<div x-data="chatApp()" x-init="init()" id="app"> | |
<header> | |
<span>Chat with deepseek-coder-1.3b</span> | |
<button @click="clearMessages" class="clear"><img | |
src="assets/img/cleaning_services.svg" | |
width="24" | |
height="24" | |
title="Clear chat" | |
alt="Clear"></button> | |
</header> | |
<main> | |
<div class="chat-container" id="chatContainer"> | |
<template x-for="(message, index) in messages" :key="index"> | |
<template x-if="message.role != 'system'"> | |
<div x-data="chatMessage()" | |
:class="[message.role, 'message'].join(' ')" | |
x-effect="watchEffect(message.content)"></div> | |
</template> | |
</template> | |
</div> | |
</main> | |
<footer> | |
<input id="input-box" type="text" | |
x-model="newMessage" | |
@keyup.enter="sendMessage" | |
placeholder="Type your message here..." | |
aria-label="Chat with AI"> | |
</footer> | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script> | |
<script src="assets/js/app.js"></script> | |
</body> | |
</html> | |