Skip to content

Latest commit

 

History

History
101 lines (72 loc) · 2.95 KB

README.md

File metadata and controls

101 lines (72 loc) · 2.95 KB

Mystique Playground

A playground and toolkit for the Mystique project.

Setup

  1. Create a .env file in the root directory with the following content:

    echo "OPENAI_API_TYPE=azure # azure or openai" > .env
echo "OPENAI_API_KEY=..." > .env
echo "AZURE_OPENAI_API_KEY=..." > .env
echo "AZURE_OPENAI_ENDPOINT=https://openai-west-us-tsaplin.openai.azure.com/" >> .env
echo "AZURE_OPENAI_DALLE_API_KEY=..." >> .env
echo "AZURE_OPENAI_DALLE_ENDPOINT=https://openai-east-us-tsaplin.openai.azure.com/" >> .env

  2. Create a virtual environment:

    python3 -m venv venv
source venv/bin/activate

  3. Install the required packages:

    source venv/bin/activate
pip install -r requirements.txt
playwright install
cd ui && npm install && cd ..

  4. Install the Chrome extension (optional):

    • Open the Extension Management page by navigating to chrome://extensions.
    • Enable Developer Mode by clicking the toggle switch next to Developer mode.
    • Click the Load unpacked button and select the ui folder.

Running the Application

To start the Playground tool, run the following command:

source venv/bin/activate
./start.sh https://main--wknd--hlxsites.hlx.page/

To use the Copilot tool, run the following command:

source venv/bin/activate
./start.sh

To start the Web Creator tool, run the following command:

source venv/bin/activate
./creator.sh

Running tests

To run the tests, execute the following command:

source venv/bin/activate
python -m unittest discover -s server/tests

Adding a New Generation Strategy to the Playground

To create a new generation strategy, follow these steps:

  1. Create a New Python Class: This class should extend AbstractGenerationStrategy.
  2. Make the Strategy Discoverable: Place the new class anywhere in the server/generation_strategies folder or a subfolder within it.

Required Methods

You need to implement three methods in your class:

  • id: A unique identifier for the strategy.
  • name: A human-readable name that will be displayed in the UI.
  • generate: The method where the new content will be generated.

The generate Method

The generate method accepts two arguments:

  • url: The URL of the website.
  • selector: The CSS selector of the block.

Useful Methods from the Base Class

You can use the following methods from the base class to enhance your strategy:

  • send_progress: To send a status update to the UI.
  • replace_html: To replace the HTML content of the page.
  • add_css: To add CSS classes to the page.
  • run_javascript: To add JavaScript code to the page.
  • run_javascript_when_selector_available: To run JavaScript code when the selector is available.

Useful Utilities

To interact with the LLM, render pages, and capture screenshots, use the functions available in llm.py and scraper.py.