pVectorSearch2023-06-05

NextJS

$ npx create-next-app@latest

They'll ask if you want to use TypeScript or something.

A folder with this name is created and Git managed.

Put into Github

push an existing repository from the command line

made private

Vercel

Log in to your dashboard

The repository you just saw is displayed, so select it and deploy.

I was able to deploy.

You can change it right from the settings.

What a convenient time we live in!

Create API

code:ts

import { NextApiRequest, NextApiResponse } from "next";

const handle = async (_req: NextApiRequest, res: NextApiResponse) => {

res.status(200).json({ data: "hello world" });

};

export default handle;

OK

I was confused when it didn't work, but GPT-4 told me to reboot the server, so I rebooted it and it worked, convenient times.

API that taps other APIs

Try ScrapboxAPI for now.

code:ts

import { NextApiRequest, NextApiResponse } from "next";

import axios from "axios";

const handle = async (_req: NextApiRequest, res: NextApiResponse) => {

const otherApiUrl =

try {

const response = await axios.get(otherApiUrl, {});

res.status(200).json(response.data);

} catch (error) {

res

.status(500)

.json({ error: "An error occurred while calling the other API" });

}

};

export default handle;

OK

Beating OpenAI

code:embed.ts

import axios from "axios";

export const embed = async (textToEmbed: string) => {

const model = "text-embedding-ada-002";

// Call OpenAI Embedding API

const openAIResponse = await axios.post(

URL,

{ input: textToEmbed, model: model },

{

headers: {

"Content-Type": "application/json",

},

}

);

return openAIEmbedding;

};

code:embed.ts

import { NextApiRequest, NextApiResponse } from "next";

import { embed } from "../../utils/embed";

const handle = async (req: NextApiRequest, res: NextApiResponse) => {

const textToEmbed = req.body.text;

const openAIEmbedding = await embed(textToEmbed);

res.status(200).json(openAIEmbedding);

};

export default handle;

OK

Striking the Qdrant

code:search.ts

import { NextApiRequest, NextApiResponse } from "next";

import { embed } from "../../utils/embed";

import { QdrantClient } from "@qdrant/js-client-rest";

const handle = async (req: NextApiRequest, res: NextApiResponse) => {

const textToEmbed = req.body.text;

const openAIEmbedding = await embed(textToEmbed);

const COLLECTION_NAME = process.env.QDRANT_COLLECTION_NAME!;

const client = new QdrantClient({

url: process.env.QDRANT_ENDPOINT,

apiKey: process.env.QDRANT_API_KEY,

});

const grdantResult = await client.search(COLLECTION_NAME, {

vector: openAIEmbedding,

limit: 3,

});

res.status(200).json(grdantResult);

};

export default handle;

OK

Take a search string from a form

code::

Error: Event handlers cannot be passed to Client Component props.

<button id="search" onClick={function} children=...>

^^^^^^^^^^

If you need interactivity, consider converting part of this to a Client Component.

Formatting the response

Create URL from Scrapbox title

https://gyazo.com/27e93ce643025450fc3930f36cbffb46

Looks aside, the search was done.

Click on the title to jump to the corresponding page in Scrapbox

I'm new to TailwindCSS and don't know what to do with the look and feel.

Let's ask ChatGPT w

I said "Make the result looks better." and they made it look good. w

https://gyazo.com/91e36c13c5d7e4a50e292b8fea06ab4e

I had the whole thing fixed.

https://gyazo.com/05926e6fbdd4634d05ea0e3e899b86d7

As for the appearance design of a web app that I'm not particular about, ChatGPT is good enough...

Note for next time

Page title image

/api/pages/:projectName/:pageTitle/icon

Screen for administrator

Search queries are stored and made available for the administrator to see.

Create a page with an explanation to that effect.

At the time of the search, the results are put into Firebase to produce permalinks, or

Published in.

I try to use it myself from my phone.

I looked at it from my phone and the background wasn't black.

When I search, I can't tell if the search is in progress or died due to an error ✅fixed

The error on my phone ✅fixed

Forgot to set environment variables!

.env.local doesn't go into the environment variable at the deployment destination (it was .gitignore to begin with and not in the repository!)

Attach [URL Fragment Text Directives

This is tricky.

For example, if there's Scrapbox notation in the mix, there's no notation in the browser text, so there's no hit.

If we're going to be serious about this, it needs to be plain text.

---