Spaces:
Running
on
Zero
Running
on
Zero
File size: 4,899 Bytes
14dc68f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import openai
import logging
from skills.skill import Skill
import os
# A little sloppy and experimental, but it's fun. Here's a demo: https://twitter.com/yoheinakajima/status/1699689836746358866
class PrettyMe(Skill):
name = 'pretty_me'
description = "A tool to update the current website UI by generating JavaScript that will execute upon load to change the front-end interface of the website it's on. The code response will be directly wrapped in a window.onload function and executed on the front-end. Use for any requests related to updating the UI (background, theme, etc.)"
api_keys_required = ['openai']
def __init__(self, api_keys, main_loop_function):
super().__init__(api_keys, main_loop_function)
def execute(self, params, dependent_task_outputs, objective):
try:
if not self.valid:
return "API keys not configured properly."
# Read the contents of your CSS and HTML files
css_path = os.path.join("public", "static", "style.css")
html_path = os.path.join("templates", "index.html")
with open(css_path, 'r') as css_file, open(html_path, 'r') as html_file:
css_content = css_file.read()
html_content = html_file.read()
# Prepare the prompt with CSS and HTML content
task_prompt = f"Generate JavaScript code to execute based on the following user input: {objective} {params}\nCSS Content: {css_content}\nHTML Content: {html_content}\nInstructions: only provide Javascript code that would go between the script tags, but do not provide the script tags.\n### Code:"
example_input2 = "make me nature themed."
example_output2 = '''
// Remove body background image and adjust body background color
document.body.style.backgroundImage = "none";
document.body.style.backgroundColor = "#4CAF50"; // Green color
// Adjust chat box background color
document.querySelector(".chat-box").style.backgroundColor = "#4CAF50"; // Green color
// Adjust chat messages' background color and bubble tail styles
document.querySelectorAll(".bg-blue-200").forEach(function(element) {
element.style.backgroundColor = "#357E68"; // Darker green
});
document.querySelectorAll(".bg-gray-300").forEach(function(element) {
element.style.backgroundColor = "#295E4C"; // Darker green
element.style.borderLeftColor = "#357E68"; // Border color matching user's bubble
});
// Adjust objectives box background color
document.querySelector(".objectives-box").style.backgroundColor = "#4CAF50"; // Green color
// Adjust task item background color
document.querySelectorAll(".task-item").forEach(function(element) {
element.style.backgroundColor = "#295E4C"; // Darker green
});
// Adjust task output background color
document.querySelectorAll(".task-output").forEach(function(element) {
element.style.backgroundColor = "#fffdfd"; // Light gray
});
'''
# Use the example2 variable in your execute function
messages = [
{"role": "user", "content": example_input2},
{"role": "assistant", "content": example_output2},
{"role": "user", "content": "make my background red."},
{"role": "assistant", "content": "document.body.style.backgroundColor = \"red\";\ndocument.body.style.backgroundImage = \"none\";"},
{"role": "user", "content": task_prompt}
]
print(messages)
response = openai.ChatCompletion.create(
model="gpt-3.5-turbo-16k",
messages=messages,
temperature=0,
max_tokens=4000,
top_p=1,
frequency_penalty=0,
presence_penalty=0
)
generated_code = response.choices[0].message['content'].strip()
# Wrap the generated code with an onload event handler
wrapped_code = f'''
<script>
var script = document.createElement("script");
script.type = "text/javascript";
script.innerHTML = `{generated_code}`;
document.head.appendChild(script);
</script>
'''
return "\n\n" + wrapped_code
except Exception as exc:
# Log the exception for debugging
logging.error(f"Error in PrettyMe skill: {exc}")
# Return a user-friendly error message
return "An error occurred while processing your request."
|