97 lines
4.5 KiB
HTML
97 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
|
<!-- meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'blob'; style-src 'self' 'unsafe-inline'" -->
|
|
<title>ai-fiction Book Runtime</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<p id="versions">We are using Node.js <span id="node-version"></span>,
|
|
Chromium <span id="chrome-version"></span>,
|
|
and Electron <span id="electron-version"></span>.</p>
|
|
<div id="book">
|
|
<div id="page_left">
|
|
<div class="header">
|
|
<h2 class="byline l10n-by">powered by Generative AI</h2>
|
|
<h1 class="title">AI Interactive Fiction</h1>
|
|
<h3 class="subtitle">An open-world text adventure</h3>
|
|
<div class="separator"><double>❦</double></div>
|
|
</div>
|
|
<div id="controls" class="buttons">
|
|
<a class="l10n-speech" id="speech" title="Toggle text to speech" disabled="disabled">speech</a>
|
|
<span><a id="speed_reset"><span class="l10n-speed">speed<sup>*</sup></span></a><input type="range" min="0" max="100" value="50" id="speed" name="speed" /></span>
|
|
<a class="l10n-restart" id="rewind" title="Restart story from beginning" disabled="disabled">restart</a>
|
|
<a class="l10n-save" id="save" title="Save progress">save</a>
|
|
<a class="l10n-load" id="reload" title="Reload from save point" disabled="disabled">load</a>
|
|
</div>
|
|
<div id="choices" class="container">
|
|
<div id="command_history">
|
|
<!-- Previous commands and responses will be displayed here -->
|
|
</div>
|
|
|
|
<div id="command_input">
|
|
<div class="input-wrapper">
|
|
<textarea id="player_input" placeholder="Enter your command..." rows="1" autofocus></textarea>
|
|
<span id="cursor"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="l10n-remark" id="remark"><i><sup>*</sup>click on page or press spacebar to fast forward text animation</i></div>
|
|
</div>
|
|
<div id="page_right">
|
|
<div id="story" class="container">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="ruler"></div>
|
|
<div class="l10n-prompt" id="indent">What do you want to do next?</div>
|
|
<div id="lighting" />
|
|
|
|
<!-- Socket.io library for client-server communication -->
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<!-- You can also require other files to run in this process -->
|
|
<script src="js/smartypants.js"></script>
|
|
<script src="js/linked-list.js"></script>
|
|
<script src="js/linebreak.js"></script>
|
|
<script src="js/knuth-and-plass.js"></script>
|
|
<script src="js/Hyphenopoly_Loader.js"></script>
|
|
<script>
|
|
var locale = "en";
|
|
</script>
|
|
|
|
<!-- TTS implementation scripts - order matters! -->
|
|
<!-- 1. Kokoro TTS library - load as module -->
|
|
<script type="module">
|
|
try {
|
|
// Import KokoroTTS class from the module
|
|
const kokoroModule = await import('./js/kokoro-js.js');
|
|
|
|
// Expose the KokoroTTS class globally
|
|
window.KokoroTTS = kokoroModule.KokoroTTS;
|
|
console.log('KokoroTTS class loaded and exposed to window');
|
|
|
|
// Dispatch an event to signal that the class is ready
|
|
const event = new CustomEvent('kokoro-class-loaded');
|
|
window.dispatchEvent(event);
|
|
} catch (error) {
|
|
console.error('Failed to load KokoroTTS module:', error);
|
|
// Dispatch an event even on failure so handlers don't wait forever
|
|
const event = new CustomEvent('kokoro-class-load-failed');
|
|
window.dispatchEvent(event);
|
|
}
|
|
</script>
|
|
|
|
<!-- 2. TTS handlers (kokoro-handler needs to wait for KokoroTTS) -->
|
|
<script src="js/kokoro-handler.js"></script>
|
|
<script src="js/tts-handler.js"></script>
|
|
|
|
<!-- 3. TTS Factory for automatic selection -->
|
|
<script src="js/tts-factory.js"></script>
|
|
|
|
<!-- Main application script -->
|
|
<script src="js/ai-fiction.js"></script>
|
|
</body>
|
|
</html> |