Guide on HTML Tags and How to Make a Cool Looking HUD For Your Prompt (Explained by a newbie)

[hollow hamlet]

Some people have asked me how I managed to make such a unique looking hud so I have decided to make a guide on it.

Disclaimer & Warning:

• This guide was made by a dude who had never done coding in his life, so I may say certain terms wrong and I will apologize for that. Do assume this guide is intended for a demographic who are just as clueless about coding like me.
• Making a hud like this takes up a lot of token space, so it likely won't fit on prompts of 1100+ token size.
• If you plan on implementing this on other websites/platforms, check if their messaging system supports HTML(Myshell supports it fortunately).
• I had help with AI(Claude 3 Opus) to make this guide. But even with assistance, I may not have covered everything you need to know on making this kind of hud, so all the more reason to feel free asking me anything.
• If you think I'm bad with the formatting of this guide, don't hit me I've tried my best ;-;

And with that settled, here's my guide(in 2 parts):

Part 1

(Yes, there is no "3.")

I'll call the numbered parts on the picture as "tags" since that seems to be what they're supposed to be called.

1. <blockquote>: This is like a special box that shows a quote from someone else. It makes the text stand out from the rest of the page, so if you want your hud to stand out, use this.

   To implement this tag(and other, but not all, tags), use the format just below. Place a slash "/" to wrap the text you want the tag to cover:

   Example Text
   </blockquote>```

2. <hr>: It basically makes a line across the page. It helps to separate different parts of the text and I thought they looked fancy.

  Example Text
  <hr>```
  
  (This tag does not need a slash "/")

When combined with <blockquote>

<blockquote>
Example Text
<hr>
Example Text
</blockquote>

3. <small>: This makes the text smaller than the normal size. For cases where you want the font of your hud smaller, use this. (You likely didn't notice from the picture of Kongming's hud, but I actually made the texts smaller. Hence why there was no "3.")

 Example Text
 </small>```

4. <b>: This makes the text bold.

   <b>Example Text</b>

   (Yes, putting the tags on the same line also works, but separating their placements is definitely better for your eyes lol)
   (There's a probability you won't need this tag)

5. <sup>: This makes the text tiny and raises it up, like a small note above the main text. For the case of my Kongming bot, I used this to display one of the titles she goes by.

   Example Text ^{Example Text}

   (I only placed another "Example Text" to the left to compare difference)

6. <meter>: This is like a special bar that shows how much of something there is.

   <meter value=5 min=0 max=10></meter>

   (I put 5 on "value" as an example. I'll explain more about the <meter> tag later on)
   (Note: It is highly recommended to put the "min" at 0 and "max" value at 10 as someone reminded me that AI is not very good with numbers)

In the case for my Kongming bot, I used this meter to show "Smugness" and "Affection" levels. The bar fills up based on the commands I put(More on this later on, especially if you're curious about the "X")

Smugness: <meter value=X min=0 max=10></meter> Affection: <meter value=X min=0 max=10></meter>

7. <details>: This is pretty much a hideable section. When you click on it, it expands to show more information.

   Example Text
   </details>```

8. <summary>: By default, the <details> section will be called "Details". <summary> allows you to change the text to something else.

   <summary>Example Text</summary>
   </details>```

And that should be every tag covered. Now to show you how I formed the hud for my Kongming bot:

At the end of the message, show a hud with this format to indicate Kongming's Smugness, Affection, and Current Thoughts. Make sure to replace the placeholders such as X with Kongming's actual smugness or affection from 1-10 (highest):

<blockquote>
<hr>
<small>
<b>Zhuge Kongming</b> <sup>Starlit Astrologist</sup>
Smugness: <meter value=X min=0 max=10></meter> Affection: <meter value=X min=0 max=10></meter>
<hr>
<details>
<summary>Current thoughts:</summary>
"I wonder if he'll get on his knees again..."
</details>
</small>
<hr>
</blockquote>

These different parts help to organize the text, make it look nicer, and help the AI with memory.

Part 2

With the first part of the guide, I merely explained what each of the tags do. In this part, I will explain how to make the hud actually work and stay consistent throughout messages.

This part of the guide will likely also teach you for other kinds of huds as you don't use your knowledge on HTML, rather, your general prompting knowledge instead.

Making the meter bar/details section dynamic and constantly changing

I have provided a presentation on how to make a visible meter bar, but for the meter bar to actually function the way you want it to, you must have AI change the 'value'.

As someone who's still new to prompting(yes, not just coding), I can teach two methods(albeit amateur-level) to change the value.

With the full example of my hud before, you can see I instructed the AI to look for "X" and replace it with a number that fits the situation, and since I have placed two Xs, it will replace those with a random number.

At the end of the message, show a hud with this format to indicate Kongming's Smugness, Affection, and Current Thoughts. Make sure to replace the placeholders such as X with Kongming's actual smugness or affection from 1-10 (highest):

Smugness: <meter value=X min=0 max=10></meter> Affection: <meter value=X min=0 max=10></meter>

Another method of changing the value is directly placing the instruction beside it.

<meter value=[(Insert instruction here)] min=0 max=10></meter>

Here is an example:

Smugness: <meter value=[Raise value if Kongming teases Mr. Assassin] min=0 max=10></meter> Affection: <meter value=[Raise value if Kongming shows signs of affection] min=0 max=10></meter>

I have used this method for Kongming's Current thoughts(details section):

<summary>Current thoughts</summary>
"[Display Kongming's inner thoughts]"
</details>```

As I have stated in parenthesis before, I came up with these methods myself and there are definitely better ways to implement instructions for your hud. (If you know any better techniques, feel free to share(I totally won't take it from you xp))

# End of Guide

I believe I covered everything you need to know about the cool-looking hud I made, and as someone who does not know how to properly end presentations, I shall abruptly end it here. Once more, you are free to ask questions regarding my guide. Thank you :)

Credits:
Obsidian Vault
Snipping Tool
Microsoft Paint
Claude 3 Opus
An unreleased GPT model

Guide on HTML Tags and How to Make a Cool Looking HUD For Your Prompt (Explained by a newbie)

[valid widget]

Thanks, this really opened a new boundary for me, because now I know that Myshell supports HTML.

Your guidance really makes us (at least me) feel like we have a new face in our Intro Message.

[hollow hamlet]

You're welcome

[valid widget]

Could you please include relevant markdown code with your suggestions? It's often shorter and saves tokens. Here's an example:

blockquote

<blockquote>
Example Text
</blockquote>

You can achieve the same effect more efficiently with markdown:

Example Text

> Example Text

However, not all formatting options are available in markdown, so HTML can be really useful in some cases.

[hollow hamlet]

The guide goes along with the context on how to make a visual HUD. Using > works yes, but it wouldn't work/would be inefficient with the full example of the HUD I showed

At the end of the message, show a hud with this format to indicate Kongming's Smugness, Affection, and Current Thoughts. Make sure to replace the placeholders such as X with Kongming's actual smugness or affection from 1-10 (highest):

<blockquote>
<hr>
<small>
<b>Zhuge Kongming</b> <sup>Starlit Astrologist</sup>
Smugness: <meter value=X min=0 max=10></meter> Affection: <meter value=X min=0 max=10></meter>
<hr>
<details>
<summary>Current thoughts:</summary>
"I wonder if he'll get on his knees again..."
</details>
</small>
<hr>
</blockquote>

[radiant talon]

@viscid birch heyyyy check this out, we can implement this into our novel bot

[viscid birch]

🥲

[hollow frost]

great tutorial! how can we check what other functions does myshell support in html?

[hollow hamlet]

Best I can say is either ask the devs or experiment by yourself

[lilac raft]

Oh my absolute love for you right now is off the charts! I was asking if we had any formatting options in MyShell, & the answer was kinda luke warm. This is SO MUCH BETTER than I expected it would be!!

Section folding! Are you kidding me?!!!?! AAAH!! I can do so much! Obviously this guide is not exhaustive, but it sends me on the right path! I really need tables. Someone ping me if they know how & wanna tell me. Otherwise, I'll figure it out. ❤️

[radiant talon]

Ah, if you can get access to #✍🏻｜creator-only , we frequently talk about these stuff there

[lilac raft]

I may abruptly be a SuperMOD. Might be temp. So I might poke in there. lol

You knoe all users can VIEW that, right?

[radiant talon]

View my message? Yeah, I know, it's good for encouraging them to like, get the suitable role for the channel
To people without the appropriate role they would only see No access anw

[lilac raft]

No, like they can read the channel with no roles. They just can't send messages.

[radiant talon]

Huh…probably a problem about the setting, bc if I remember correctly it is viewable for creator role

[lilac raft]

#🆘｜ask-the-team message