Search Emoji by Meaning
Build an emoji search page that finds meaning-based matches with Upstash Vector.
Introduction
30 Second Summary
Emoji pickers often depend on exact labels, which makes the right symbol surprisingly hard to find. A search for celebrate can miss the party popper because its name uses different words.
In this project, you will build a meaning-based emoji search using Upstash Vector. A built-in embedding model will turn emoji names with keywords into searchable representations of their meaning.
What You'll Build
You will type celebrate into a browser page and see the party popper rank near the top while plain keyword matching misses it.
By the end of this project, you'll have:
- A meaning-based emoji search that finds relevant symbols even when your query does not appear in their names.
- A ranked results page that updates as you type and shows the closest emoji for each query.
- A side-by-side comparison that reveals which searches only the meaning-based approach can answer.
- Secret Mission: An optional challenge to push your emoji search skills further.
Do I need a separate embedding API key?
Upstash Vector uses the built-in model selected when you create the index. This keeps the project focused on loading emoji data and searching it from your page.
Before We Start
The emoji search eventually lives on a static HTML page. Its meaning-based results come from a vector index in Upstash Vector.
Before you build either part, you need a browser that reaches Upstash. You also need a local code editor that can prepare the page.
In this step, get ready to:
- Reach the official Upstash account entry point.
- Ready a local code editor for the search page.
- Choose a direct-file workflow for previewing static HTML.
Prepare Upstash access
Your Upstash account gives you access to the console where the emoji index will live. This check gets you to the correct account entry point before index creation begins.
- Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
- Type the name of your preferred browser into the search bar.
- Press Enter to open the browser.
- Enter Upstash in the browser's address bar.
- Press Enter to search.
- Select the result for the official Upstash website.
- Use the page's account access option to reach the sign-in or account creation page.
✔️ I already have an account
Your existing account is ready for the index setup in the next step.
ⓧ I need an account
The official account creation page is your starting point in the next step. You are ready to create the account before building the index.
Good, you now have a clear route into Upstash for the index setup.
Can't reach the account page?
Check that the result belongs to the official Upstash website. Refresh the browser if the page does not load.
Try another browser if the account page remains unavailable.
Help me reach the official Upstash account page.
Ready your local code editor
The search page needs a local editor where you can work with its files. A blank editing tab is enough to confirm that your workspace is available.
- Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
- Type the name of your local code editor into the search bar.
- Press Enter to open the editor.
✔️ My editor opens
Your editor is available for the search page.
ⓧ I need a local editor
A local code editor lets you create the search page without changing files through the browser.
- Choose a local code editor from its official website.
- Download the installer for your operating system.
- Follow the installer prompts until the installation completes.
- Use your computer's application search to open the installed editor.
- Use your editor's new-file control to display a blank editing tab.
You should see an empty editing area where the search page can be written. That workspace is ready for the coding steps ahead.
Editor not opening?
Close the editor before trying to open it again. Reinstall it from its official website if the application still does not start.
Help me get my local code editor ready.
Choose your static preview workflow
A browser can display a saved HTML file directly from your computer. This gives you a simple preview workflow for the search page.
How does direct-file preview work?
Finder on macOS or File Explorer on Windows holds the saved page. Your default browser displays the page when you open its .html file.
This workflow keeps the feedback loop short. Each saved visual change can be checked in the browser.
- Choose direct file opening as the preview method for this project.
- Switch back to your browser from earlier.
- Return the browser to the public Upstash page.
- Place the browser beside your local code editor.
Before the final check, which app do you expect to show Upstash? Which app do you expect to hold the search page code?
You should see the public Upstash page next to a blank editing tab. This proves your browser and editor are ready.
Your browser and editor are ready. Next, you'll create your Upstash account if needed before building the Vector index.
Create Your Vector Index
An emoji search needs a place where meaning can be stored for similarity matching. Upstash Vector provides that place through a vector index.
This step creates an empty index with a built-in embedding model. The model later converts each emoji's descriptive text into vectors.
In this step, get ready to:
- Sign in to the Upstash Console.
- Create an empty Dense index with a built-in embedding model.
- Locate the connection details needed by later steps.
Sign in to Upstash Console
The Upstash Console is where you create the index. It also gives you a Data Browser for checking what the index stores.
- Open the Upstash Console in your browser.
- Complete the account prompts if you are not signed in.
- Select Vector in the console navigation.
- Confirm that you can see Create Index.
Good, the Vector page is ready for the index that powers this project.
Create the empty index
A built-in embedding model lets the index accept text directly. The same model later processes each search query.
Billing choices can feel high-stakes. The selected plan for this project is Free.
Why use a built-in model?
Upstash Vector converts raw text into vectors inside the index. This removes the need to manage a separate embedding API key.
- Click Create Index on the Vector page.
- Enter emoji-search in the Name field.
- Choose a region near you in Region.
- Select Dense in Type.
- Select BAAI/bge-small-en-v1.5 in Embedding Model.
- Select Cosine for similarity.
- Select Free for the plan.
- Click Create Index to finish.
You'll see the emoji-search index details when creation finishes.
That is the main setup complete: your index can now accept raw emoji text.
Index creation not completing?
- Fill any required field that still shows no selection.
- Check whether emoji-search already exists on the Vector page before retrying.
Help me troubleshoot my index setup. You can also ask the Upstash community about an account-specific console problem.
Verify the empty index
The Data Browser shows the records currently stored in the index. The Connect section keeps the values that later code uses to reach it.
Before you check, how many vectors do you expect this new index to contain? The next click tests your prediction.
- Select Data Browser in the index navigation.
You'll see no stored emoji records. The index starts with a vector count of zero.
That empty view is a success. The index exists with room for the emoji list.
Connection credentials can feel risky. The REST token can stay hidden during this check.
- Select Connect in the index navigation.
- Confirm that the REST URL value is displayed.
- Confirm that the REST token entry is available.
- Keep the REST token hidden.
- Keep this browser tab available for the later search-page configuration.
- Return to Data Browser.
Your index is ready for later code. Its secret stays off-screen.
Your empty Vector index is ready. Next, you'll load the emoji list so the Data Browser finally has something to show.
Load Emoji Data
Your empty emoji-search index proves the Upstash Vector setup is ready. A search index becomes useful once it has examples of what people might want to find.
Each emoji needs searchable text that captures its meaning. This step loads a prepared starter list with display metadata, so later searches can return the right character.
In this step, get ready to:
- Shape a prepared emoji list for semantic search.
- Load each record through the built-in embedding model.
- Confirm the Data Browser reports stored vectors.
Shape the first emoji record
The searchable Data field combines an emoji name with related keywords. This gives the embedding model more meaning to work with.
The Metadata object keeps the visible character plus its name and keywords attached to the vector. Your search page can retrieve those display values later.
What goes into one record?
- The id gives the record a unique identifier.
- The data value holds the text that Upstash embeds.
- The metadata object stores entries named emoji, name, and keywords.
- The party popper record uses party-popper as its ID. Its data text is party popper celebration party popper tada.
- Return to the Data Browser for the emoji-search index.
- Select Upsert Data.
- Enter party-popper in the ID field.
- Enter party popper celebration party popper tada in the Data field.
- Store party popper under name in the Metadata object.
- Store celebration, party, popper, tada under keywords in the Metadata object.
- Set emoji to the party popper character using the picker opened with Control+Command+Space on macOS or Windows+. on Windows.
- Submit the record to the default namespace.
You should see the party popper record in the Data Browser. Your first meaning-aware emoji record is now stored as an automatically generated vector.
Vector not appearing?
- Confirm you selected Upsert Data so the raw text passes through the built-in model.
- Check that the Data field contains text instead of a manually created vector.
- Check that party-popper is present in the ID field.
Help me troubleshoot an emoji record that does not appear in Upstash Vector.
Load the remaining prepared records
A wider set of meanings gives the index useful comparisons. These records cover celebrations, gifts, praise, and achievements without requiring a separate embedding service.
Prepared Emoji Records
- Fireworks uses fireworks as its ID. Use fireworks celebration festival night sparkle as its data text. Store fireworks as its name. Store celebration, festival, night, sparkle as its keywords. Use the matching fireworks character as its emoji value.
- Wrapped gift uses wrapped-gift as its ID. Use wrapped gift birthday present surprise as its data text. Store wrapped gift as its name. Store birthday, present, surprise as its keywords. Use the matching wrapped gift character as its emoji value.
- Birthday cake uses birthday-cake as its ID. Use birthday cake celebration dessert party as its data text. Store birthday cake as its name. Store celebration, dessert, party as its keywords. Use the matching birthday cake character as its emoji value.
- Clapping hands uses clapping-hands as its ID. Use clapping hands applause praise congratulations as its data text. Store clapping hands as its name. Store applause, praise, congratulations as its keywords. Use the matching clapping hands character as its emoji value.
- Trophy uses trophy as its ID. Use trophy achievement award prize winner as its data text. Store trophy as its name. Store achievement, award, prize, winner as its keywords. Use the matching trophy character as its emoji value.
- Upsert the fireworks record using its prepared values.
- Upsert the wrapped gift record using its prepared values.
- Upsert the birthday cake record using its prepared values.
- Upsert the clapping hands record using its prepared values.
- Upsert the trophy record using its prepared values.
You should now see six unique emoji records in the Data Browser. Each record contains raw meaning text plus the metadata needed to display a result.
Verify the indexed data
Before you refresh, do you expect the vector count to stay at zero or reflect every unique record you submitted?
- Refresh the Data Browser for emoji-search.
- Read the Vector Count shown for the index.
- Inspect the record with the ID party-popper.
- Confirm its stored data contains the emoji name plus related keywords.
- Confirm its metadata contains emoji, name, and keywords entries.
You should see a Vector Count of 6 plus the prepared metadata on each record. You have turned an empty index into the data backbone for meaning-based emoji search.
Keep Credentials Out of Frame
Your checkpoint only needs the vector count plus one expanded emoji record.
- Crop out any panel that shows the index URL or REST token.
Your index now holds searchable emoji meanings plus the display details for each result. Next, you will query those vectors to see which emoji the model ranks closest to a phrase.
Test Meaning-Based Search
Your emoji-search index now holds the uploaded emoji records. Upstash Vector used its built-in embedding model to map their descriptive text into vectors.
Stored vectors only prove that loading worked. In this step, you'll test whether semantic search connects celebrate with the party popper even though celebrate does not appear in its name.
In this step, get ready to:
- Return to the query interface for emoji-search.
- Search for celebrate as plain text.
- Use the ranked scores to verify a meaning-related match.
Return to the query interface
The built-in model can embed plain text at query time. The console compares that query vector with the emoji vectors already in the index.
The query controls can be easy to miss because they sit inside the index's data browser.
- Switch back to the console from earlier.
- Select Vector in the top navigation bar.
- Select the emoji-search index from the index list.
- Select Data Browser inside the index.
- Scroll to the query interface.
- Choose the option that accepts plain-text data.
You should see an input for plain text. You should also see a control that runs the query.
Search by meaning
Semantic search ranks records by vector similarity. The score shows how closely each record aligns with the query.
Before you run the query, which emoji do you expect to appear near the top for celebrate?
- Enter celebrate in the plain-text query field.
- Submit the query using the query panel's run control.
You should see a ranked list of emoji records. Each result includes a similarity score.
- Find the party popper emoji among the stronger matches.
- Review the party popper record's name.
- Review the party popper record's keyword metadata.
- Compare its score with a lower-ranked result.
The party popper appears because its record carries celebration-related meaning. Its name lacks the word celebrate.
That's the proof point: your index can connect a user's intent with a relevant emoji.
How do similarity scores work?
Each score measures how closely one result aligns with your query. A higher score signals a stronger match within the returned ranking.
No useful results?
- Return to Data Browser to confirm the vector count is above zero.
- Wait briefly when your upload has just finished.
- Run celebrate again using the plain-text query option.
- Check the party popper record's keyword metadata if its match still looks unrelated.
Help me troubleshoot irrelevant semantic results.
Your index can now turn a plain-language idea into relevant emoji results. Next up, you'll bring that search into a page you can use from your browser.
Build the Vector Search Page
Your Upstash Vector index already returns meaning-based matches in the console. You proved that celebrate can surface the party popper.
Now you'll turn that result into a local HTML page. The page gives your semantic search a browser interface.
The page needs to send each typed query to the REST API. It also needs to turn the ranked response into emoji result cards.
In this step, get ready to:
- Create the local emoji search interface.
- Connect the page to the emoji-search index.
- Confirm that semantic results update as you type.
Build the page layout
The first version gives the search experience a visible shell. This creates a tight test loop before the index connection is added.
- Return to your local code editor.
- Use the editor's new file control to create emoji-search.html on your Desktop.
- Build the search layout by pasting this code into emoji-search.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Search</title>
<style>
/* Keep the search page focused and readable */
:root { font-family: Arial, sans-serif; color: #182230; background: #f5f7fb; }
body { margin: 0; padding: 48px 20px; }
main { max-width: 680px; margin: 0 auto; }
h1 { margin-bottom: 8px; }
input { width: 100%; box-sizing: border-box; padding: 14px; font-size: 18px; border: 1px solid #cbd5e1; border-radius: 10px; }
#results { display: grid; gap: 12px; margin-top: 20px; }
.result { display: flex; gap: 16px; align-items: center; padding: 16px; background: white; border-radius: 12px; }
.emoji { font-size: 40px; }
.details { display: grid; gap: 4px; }
.score { color: #64748b; font-size: 14px; }
</style>
</head>
<body>
<main>
<!-- Give the query and ranked matches clear places on the page -->
<h1>Find Emoji by Meaning</h1>
<p>Type an idea to find the closest emoji.</p>
<input id="search" type="search" value="celebrate" aria-label="Search emoji by meaning">
<section id="results" aria-live="polite">Start typing to search.</section>
</main>
</body>
</html>
What Does This Code Do?
- The search input holds the meaning you want to find.
- The input starts with celebrate so the connected page can show a result immediately.
- The results section gives ranked matches a dedicated display area.
- The CSS turns each returned match into a readable result card.
- Save emoji-search.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
- Use your existing static-page method to open emoji-search.html in the browser.
You'll see the Find Emoji by Meaning heading above a search field. The field contains celebrate.
Page Not Displaying Correctly?
- Confirm that the file ends with .html.
- Check that the browser opened the saved emoji-search.html file.
- Compare the closing </body> tag against the code above.
Help me fix my local HTML search page.
Connect the search request
Your index can embed raw query text because it uses a built-in embedding model. The browser sends that text to the query endpoint.
Keep Your Token Local
Pasting a REST token into a page can feel risky. This local demo uses it only on your computer.
Do not publish emoji-search.html or commit it to a repository while the token remains inside.
- Keep the REST token from your emoji-search index ready for the replacement after the code.
- In emoji-search.html, find the </body> line.
- Add the search logic immediately above that line by pasting this code:
<script>
// Store the index connection and page elements used by every search
const INDEX_URL = "[[UPSTASH_VECTOR_REST_URL=\"your Upstash Vector REST URL\"]]";
const REST_TOKEN = "your-rest-token-here";
const searchInput = document.querySelector("#search");
const resultsList = document.querySelector("#results");
// Send raw text to the index so its built-in model can embed the query
async function searchEmoji(query) {
if (!query.trim()) {
resultsList.textContent = "Start typing to search.";
return;
}
resultsList.textContent = "Searching...";
try {
const response = await fetch(`${INDEX_URL}/query-data`, {
method: "POST",
headers: { Authorization: `Bearer ${REST_TOKEN}` },
body: JSON.stringify({ data: query, topK: 3, includeMetadata: true }),
});
if (!response.ok) throw new Error("Search request failed");
const { result } = await response.json();
// Render the emoji metadata and similarity score from each ranked match
resultsList.innerHTML = result.map(({ metadata, score }) => `<article class="result"><span class="emoji">${metadata.emoji}</span><span class="details"><strong>${metadata.name}</strong><span class="score">Score: ${score.toFixed(3)}</span></span></article>`).join("");
} catch (error) {
resultsList.textContent = "Search failed. Check your URL and token.";
}
}
// Update the ranked matches whenever the query changes
searchInput.addEventListener("input", (event) => searchEmoji(event.target.value));
searchEmoji("celebrate");</script>
What Does This Code Do?
- The INDEX_URL points each request at your Upstash Vector index.
- The Authorization header proves that the page can access the index.
- The request sends the typed phrase as data. The built-in model converts that phrase into an embedding.
- The topK: 3 setting asks for the three closest matches.
- The returned result array becomes cards containing each emoji name and similarity score.
- The input listener repeats the search whenever the field changes.
- Replace your-rest-token-here with the REST token from your emoji-search index.
- Save emoji-search.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
✔️ Awesome, I've got everything!
Great. Double check that emoji-search.html is saved before testing the search.
ⓧ I'd like to double check the full code
Here is the complete emoji-search.html file for comparison:
- Keep your own index URL and REST token while comparing the surrounding structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Search</title>
<style>
/* Keep the search page focused and readable */
:root { font-family: Arial, sans-serif; color: #182230; background: #f5f7fb; }
body { margin: 0; padding: 48px 20px; }
main { max-width: 680px; margin: 0 auto; }
h1 { margin-bottom: 8px; }
input { width: 100%; box-sizing: border-box; padding: 14px; font-size: 18px; border: 1px solid #cbd5e1; border-radius: 10px; }
#results { display: grid; gap: 12px; margin-top: 20px; }
.result { display: flex; gap: 16px; align-items: center; padding: 16px; background: white; border-radius: 12px; }
.emoji { font-size: 40px; }
.details { display: grid; gap: 4px; }
.score { color: #64748b; font-size: 14px; }
</style>
</head>
<body>
<main>
<!-- Give the query and ranked matches clear places on the page -->
<h1>Find Emoji by Meaning</h1>
<p>Type an idea to find the closest emoji.</p>
<input id="search" type="search" value="celebrate" aria-label="Search emoji by meaning">
<section id="results" aria-live="polite">Start typing to search.</section>
</main>
<script>
// Store the index connection and page elements used by every search
const INDEX_URL = "[[UPSTASH_VECTOR_REST_URL=\"your Upstash Vector REST URL\"]]";
const REST_TOKEN = "your-rest-token-here";
const searchInput = document.querySelector("#search");
const resultsList = document.querySelector("#results");
// Send raw text to the index so its built-in model can embed the query
async function searchEmoji(query) {
if (!query.trim()) {
resultsList.textContent = "Start typing to search.";
return;
}
resultsList.textContent = "Searching...";
try {
const response = await fetch(`${INDEX_URL}/query-data`, {
method: "POST",
headers: { Authorization: `Bearer ${REST_TOKEN}` },
body: JSON.stringify({ data: query, topK: 3, includeMetadata: true }),
});
if (!response.ok) throw new Error("Search request failed");
const { result } = await response.json();
// Render the emoji metadata and similarity score from each ranked match
resultsList.innerHTML = result.map(({ metadata, score }) => `<article class="result"><span class="emoji">${metadata.emoji}</span><span class="details"><strong>${metadata.name}</strong><span class="score">Score: ${score.toFixed(3)}</span></span></article>`).join("");
} catch (error) {
resultsList.textContent = "Search failed. Check your URL and token.";
}
}
// Update the ranked matches whenever the query changes
searchInput.addEventListener("input", (event) => searchEmoji(event.target.value));
searchEmoji("celebrate");</script>
</body>
</html>
Before you refresh, predict which emoji will rank first for celebrate.
- Return to the browser.
- Refresh emoji-search.html.
You'll see three ranked emoji cards with similarity scores. A meaning-related result such as the party popper should appear near the top.
- Replace celebrate with party in the search field.
You'll see the result cards update without reloading the page. Your browser is now querying the index as you type.
Search Results Not Loading?
- Confirm that your-rest-token-here was replaced with the token from your index.
- Confirm that the index URL belongs to the emoji-search index.
- Check that metadata.emoji matches the emoji field in your uploaded records.
- Check that metadata.name matches the name field in your uploaded records.
Help me debug my Upstash Vector browser search.
That's the browser search loop working from input to ranked results. Next, you'll place a plain keyword search beside it to expose what meaning-based search can find.
Compare Keyword Search Results
The meaning-based page you opened now returns ranked emoji from Upstash Vector. That proves your semantic search can connect a typed idea to nearby meanings.
This step adds plain keyword search beside those results. The comparison exposes matches that literal text misses.
In this step, get ready to:
- Add a plain keyword results area beside the semantic results.
- Filter local emoji records using names plus keyword metadata.
- Compare both approaches with celebrate.
Add the keyword results area
Side-by-side panels give both approaches the same query. Any difference then comes from how each approach matches the records.
- Switch back to the local code editor from earlier.
- Locate the markup that renders the existing semantic matches.
- Add a second visible results area beside the semantic results area.
- Give the new area a heading that identifies plain keyword search.
- Save the existing search page file.
- Return to the local browser page from earlier.
- Reload the page.
You should see two distinct results areas beside the same query input. One area holds semantic matches from the index while the new area is ready for local keyword matches.
Why compare side by side?
Semantic search ranks records by meaning stored in the vector index. Keyword search checks whether the query text occurs in a local name or keyword.
Showing both responses together turns an abstract difference into something you can see.
Missing the second results area?
- Confirm the new results markup sits inside the rendered page structure.
- Check that the new area is visible at your current browser width.
- Verify that you saved the search page file before reloading the browser.
Help me fix the missing keyword results area.
Connect local keyword matching
The semantic side asks the Vector index to rank meaning. The keyword side scans the local emoji dataset for literal text in each record's name plus keyword metadata.
- Locate the input handler that currently sends each typed query to the emoji-search index.
- Update the existing input handler to filter the local emoji dataset by each record's name plus keyword metadata.
- Render the filtered records in the plain keyword results area.
- Save the existing search page file.
- Return to the local browser page from earlier.
- Reload the page.
- Enter an exact emoji name from the local dataset into the query input.
The keyword area should display the matching emoji. The semantic area should continue showing ranked results from the index.
What does keyword matching check?
The local filter compares the query with the text stored in each emoji name plus its keyword metadata. Case-normalized comparisons keep capitalization from hiding literal matches.
This baseline only finds text that already exists in the dataset.
Keyword matches not appearing?
- Confirm the filter reads the same local emoji dataset that populated the index.
- Check that the comparison uses the name plus keyword metadata from every record.
- Verify that the filtered records render inside the new results area.
Help me debug the local keyword filter.
Compare meaning with literal text
A keyword baseline becomes useful when the query describes an idea that is missing from the stored text. This final check puts that gap on screen.
Before you try the comparison, do you expect both panels to include the party popper for celebrate?
- Replace the current query with celebrate.
You should see the semantic side return the party popper among its meaning-related matches. The keyword side omits that emoji because the literal query is absent from its local name plus keywords.
Why did keyword search miss it?
The semantic side compares the meaning of celebrate with the embedded meaning of every emoji record. That relationship places the party popper near the query even without an exact text match.
The keyword side has no meaning model. It can only return records containing the typed text.
Seeing the same matches?
- Confirm the keyword area filters the local dataset instead of reusing semantic results.
- Inspect the party popper record for an exact occurrence of celebrate.
- Choose another related idea that is absent from every local name plus keyword entry.
Help me find a query that exposes the difference.
You now have visible proof of what meaning-based retrieval adds. Your page can connect intent with an emoji that literal matching overlooks.
Secret mission
Audit Semantic Search Quality
Your meaning-based search succeeds on `celebrate`, but one demo query cannot prove search quality. Test a varied query set. Find one semantic win. Uncover one edge case.
Clean Up Your Resources
Clean Up Your Resources
Choose whether to keep your project available, pause your work, or delete its resources. The local files create no ongoing hosted usage. Your Upstash Vector index is the resource to remove if you want to stop its future hosted usage.
Resources you used:
- Upstash Vector index emoji-search with uploaded emoji records.
- Local emoji dataset used for semantic indexing and keyword matching.
- Local emoji search page with side-by-side semantic search and keyword search.
Keep everything running
No action needed. Choose this if you want to keep testing meaning-based searches or reference the comparison later.
- Keep the emoji-search index available in the Upstash Console for future semantic queries.
- Keep the local emoji dataset so you can repopulate the index later.
- Keep the local emoji search page so you can compare semantic results with keyword matches.
Pause - I'll come back to this later
Close the local search page to stop sending queries while you take a break. Your hosted index and local files stay available.
- Close the browser tab containing the local emoji search page.
- Leave the emoji-search index in the Upstash Console.
- Keep the local emoji dataset in its current location.
- Keep the local emoji search page files in their current location.
Delete - I don't want to use this again
Deleting the index permanently removes its hosted emoji records. This option gives you a clean break from the project.
- Return to the Upstash Console from earlier.
- Select the Vector index named emoji-search.
- Open the settings page for the selected index.
- Use the index deletion control to delete emoji-search.
- Confirm that emoji-search no longer appears in your Vector index list.
The hosted emoji vectors are removed when emoji-search disappears from the index list.
- Switch back to the local code editor from earlier.
- Delete the local emoji dataset used to populate emoji-search.
- Delete the local files that make up the emoji search page.
- Confirm that the dataset no longer appears in the editor's file list.
- Confirm that the search page files no longer appear in the editor's file list.
Nice Work!
Nice Work!
You pulled it off! Your meaning-based emoji search now uses Upstash Vector to turn everyday words into ranked emoji matches.
What you learned:
- Created an emoji vector index from emoji names plus keyword metadata. The built-in embedding model converted that text into meaning-based records.
- Tested semantic search with queries such as celebrate. You saw relevant emoji ranked with similarity scores even when the query was absent from their names.
- Built a side-by-side search page with semantic results beside plain keyword results. The comparison revealed relevant matches that keyword filtering missed.
- Secret Mission: took on an optional challenge to push your meaning-based search skills further.
Ready to quiz yourself?