GreenPromptV2/options.html at main · LaurencePy/GreenPromptV2 · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <img src="/icons/GreenPrompt-title-small.png" alt="GreenPrompt" style="height: 40%; width: 40%; max-width: 800px;">
    <h1>Thank you for installing! You're only a few steps away from greener AI usage.
         Please set your API key before using, following the steps below!</h1>
    <style>
        body {
            font-family: sans-serif;
            font-size: large;
            padding: 5px 20px;
            width: 800px;
        }
        h1 {
            font-size: 1.2em;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="password"], input[type="text"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 15px;
            cursor: pointer;
        }
        #status {
            margin-top: 10px;
            font-weight: bold;
        }
        .toggle-container {
            margin-top: 15px;
            display: flex;
            align-items: center;
        }
        .toggle-label {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <p>GreenPrompt is a free Chrome extension that rewrites your AI prompts to be shorter and more efficient. By minimising unnecessary processing, it reduces wasted energy and helps make your daily AI use more sustainable.</p>
    <p>How? GreenPrompt uses a highly efficient AI model (Qwen2.5-3B-Instruct) to refine your prompt before it reaches a more powerful model such as GPT-4. This initial step removes unnecessary information whilst preserving your prompt's functional meaning. This means the larger, more energy-intensive model has less data to analyse, leading to a significant overall reduction in processing and energy use.</p>
    <p>Huggingface is an AI platform allowing models to be deployed remotely.</p>
    <p>To use GreenPrompt, you will need a Hugging Face API key. If you don't have one, make an account and get it from your <a href="https://huggingface.co/settings/tokens" target="_blank">Hugging Face settings.</p></a>
    <p>Set the token to "read" as shown on the image below</p>
    <img src="/icons/get key.png" alt="Hugging Face API Key Settings" style="height: 20%; width: 20%; max-width: 400px;">
    <p></p>
    <small>Note: Huggingface has a maximum free limit of $0.10 of API usage per month. You will not be charged but will receive an error if you reach the limit.</small>
    <p></p>
    <div class="form-group">
        <label for="api-key">Hugging Face API Key</label>
        <input type="password" id="api-key" placeholder="Enter your Hugging Face API key">
        <small>Your key is stored securely in your browser and is never shared.</small>
    </div>

    <div id="toggle-container" style="display: none;">
        <input type="checkbox" id="show-key-toggle">
        <label for="show-key-toggle" class="toggle-label">Show API Key</label>
    </div>

    <button id="save-btn">Save Key</button>
    <div id="status"></div>
    <a href="https://laurencepy.github.io/posts/GreenPrompt/">Privacy policy</a>
    <script src="options.js"></script>
</body>
</html>