prompt-engineering-resources/Interactive Learning Pages/AI Prompt Engineering Infographic.html at main · scalable-dynamics/prompt-engineering-resources · 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
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Prompt Engineering Infographic</title>
    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
    <style>
        body {
            font-family: 'Press Start 2P', cursive;
            background-color: #202020;
            color: #ffffff;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #383838;
            border: 4px solid #ffffff;
            padding: 20px;
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        .section {
            margin-bottom: 30px;
        }
        .section-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #92cc41;
        }
        .icon {
            font-size: 24px;
            margin-right: 10px;
        }
        .bullet {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
        }
        .bullet-text {
            font-size: 12px;
            line-height: 1.4;
        }
        .divider {
            border-top: 2px dashed #ffffff;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI Prompt Engineering: A Pixel Perfect Guide</h1>

        <div class="section">
            <div class="section-title"><i class="icon nes-icon star"></i>Foundational vs. Fine-Tuned Models</div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Foundational Models: Versatile but not specialized (e.g., GPT-3, GPT-4)</div>
            </div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Fine-Tuned Models: Optimized for specific tasks (e.g., InstructGPT, ChatGPT)</div>
            </div>
        </div>

        <div class="divider"></div>

        <div class="section">
            <div class="section-title"><i class="icon nes-icon star"></i>Importance of Prompt Engineering</div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">In-Context Learning: Provide relevant context within prompts</div>
            </div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Managing Token Limits: Avoid exceeding the model's maximum token limit</div>
            </div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Sequential Prompting: Place important information at the start</div>
            </div>
        </div>

        <div class="divider"></div>

        <div class="section">
            <div class="section-title"><i class="icon nes-icon star"></i>System Prompting with XML Tags</div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Use tags like &lt;thinking&gt; and &lt;answer&gt; to structure prompts</div>
            </div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Organize model's reasoning and final output</div>
            </div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Useful for financial reports, legal analyses, and donor emails</div>
            </div>
        </div>

        <div class="divider"></div>

        <div class="section">
            <div class="section-title"><i class="icon nes-icon star"></i>Managing Conversation Context</div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Avoid overloaded context: Don't overwhelm the model</div>
            </div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Use detailed summaries to carry essential information</div>
            </div>
            <div class="bullet">
                <i class="nes-icon is-small heart"></i>
                <div class="bullet-text">Start new conversations with a summary for context</div>
            </div>
        </div>
    </div>
</body>
</html>