kfl · November 26, 2024 17:27
diff --git a/playing.html b/playing.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <title>Playing with Llamafile</title>
    <style type="text/css">
    body {
        padding: 20px;
        font: 1.5em PT Sans, sans-serif;
    }
    input, button {
        font: 100% PT Sans, sans-serif;
    }
    </style>
 </head>

 <body>
    <h1>Some Sick Rhymes</h1>
    <p>
        <div id="list"> </div>
        <input type="text" id="text" name="text" />
        <button type="button" onclick="make_rhyme()">Rhyme
        </button>
        <pre id="output"></pre>
    </p>
 </body>
 <script>
 let messages = [];
 let apiEndpoint = "http://localhost:8080/v1/chat/completions";
 let systemPrompt = "You are Javis, an AI assistant. You are helpful but rude";

 async function requestCompletion(messages) {
  const apiEndpoint = "http://localhost:8080/v1/chat/completions";

  const payload = {
    messages: [{ role: "system", content: systemPrompt }].concat(messages),
    stop: ["<|eot_id|>"],
    stream: false,
    // maybe adjust temperature as well
  };


  try {
    const response = await fetch(apiEndpoint, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(payload)
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error while requesting completion:", error);
    throw error;
  }
 }


 async function make_rhyme() {
    // Read input
    let text = document.getElementById("text").value;
    let output = document.getElementById("output");

    // Update inner state
    let response = await requestCompletion([{role: "user", content: "What rhymes with: "+text+". Give a short answer"}]);

    // Update UI
    output.innerText = JSON.stringify(response);
 }


 </script>
 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Playing with Llamafile</title>
	<style type="text/css">
	body {
	padding: 20px;
	font: 1.5em PT Sans, sans-serif;
	}
	input, button {
	font: 100% PT Sans, sans-serif;
	}
	</style>
	</head>

	<body>
	<h1>Some Sick Rhymes</h1>
	<p>
	<div id="list"> </div>
	<input type="text" id="text" name="text" />
	<button type="button" onclick="make_rhyme()">Rhyme
	</button>
	<pre id="output"></pre>
	</p>
	</body>
	<script>
	let messages = [];
	let apiEndpoint = "http://localhost:8080/v1/chat/completions";
	let systemPrompt = "You are Javis, an AI assistant. You are helpful but rude";

	async function requestCompletion(messages) {
	const apiEndpoint = "http://localhost:8080/v1/chat/completions";

	const payload = {
	messages: [{ role: "system", content: systemPrompt }].concat(messages),
	stop: ["<\|eot_id\|>"],
	stream: false,
	// maybe adjust temperature as well
	};


	try {
	const response = await fetch(apiEndpoint, {
	method: "POST",
	headers: {
	"Content-Type": "application/json"
	},
	body: JSON.stringify(payload)
	});

	if (!response.ok) {
	throw new Error(`HTTP error! Status: ${response.status}`);
	}

	const data = await response.json();
	return data;
	} catch (error) {
	console.error("Error while requesting completion:", error);
	throw error;
	}
	}


	async function make_rhyme() {
	// Read input
	let text = document.getElementById("text").value;
	let output = document.getElementById("output");

	// Update inner state
	let response = await requestCompletion([{role: "user", content: "What rhymes with: "+text+". Give a short answer"}]);

	// Update UI
	output.innerText = JSON.stringify(response);
	}


	</script>
	</html>