I have built many websites and usually I used a combination of PHP, Javascript, and css. I aminterested in building a site including services from openai. I found a nice tutrial on Medium that illustates this incorporating some Pyscript posted below:
<body>
<div id="prompt"></div>
<div id="completion"></div>
<py-script>
import json
from js import localStorage, document, console, XMLHttpRequest
# !! set localStorage.setItem("openAI", "sk-YOUR_KEY") !!
bearer = "Bearer " + localStorage.getItem("openAI")
promptDiv = document.getElementById("prompt")
prompt = "list three colors"
promptDiv.innerHTML = "<h3>Prompt: </h3>\"" + prompt + "\"<hr/>"
# for best results (at a cost of $.02 per 1k tokens), use text-davinci-003
# for quickest and cheapest results ($.0004 per 1k tokens), use text-ada-001
engine = "text-ada-001"
xhr = XMLHttpRequest.new()
xhr.open("POST", "https://api.openai.com/v1/completions", False)
xhr.setRequestHeader("Content-Type", "application/json")
xhr.setRequestHeader("Authorization", bearer)
data = json.dumps({
"model": engine,
"prompt": prompt,
"max_tokens": 100,
"temperature": 0,
"top_p": 1,
"frequency_penalty": 1.2,
"presence_penalty": 0
})
xhr.send(data)
json_response = json.loads(xhr.response)
completion_text = json_response["choices"][0]["text"]
# console.log("Colors: " + completion_text)
completionDiv = document.getElementById("completion")
completionDiv.innerHTML = "<h3>OpenAI (" + engine + ") Response: </h3>\"" + completion_text.strip() + "\""
</py-script>
</body>
My question is, can I use this approach on hugging face?