Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Axios removed from js client #348

Closed
wants to merge 12 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,4 @@ dist
.terraform/
.terraform.lock.hcl
terraform.tfstate
.idea
2 changes: 1 addition & 1 deletion clients/js/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ node_modules

# parcel related
.parcel-cache
dist
dist
3 changes: 3 additions & 0 deletions clients/js/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
dist
node_modules
src/generated
1 change: 1 addition & 0 deletions clients/js/.prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
10 changes: 7 additions & 3 deletions clients/js/DEVELOP.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,24 @@
This readme is helpful for local dev.

### Prereqs:

- Make sure you have Java installed (for the generator). You can download it from [java.com](https://java.com)
- Make sure you are running the docker backend at localhost:8000 (*there is probably a way to stand up the fastapi server by itself and programmatically in the loop of generating this, but not prioritizing it for now. It may be important for the release)
- Make sure you are running the docker backend at localhost:8000 (\*there is probably a way to stand up the fastapi server by itself and programmatically in the loop of generating this, but not prioritizing it for now. It may be important for the release)

### Generating

1. `yarn` to install deps
2. `yarn genapi-zsh` if you have zsh
3. Examples are in the `examples` folder. There is one for the browser and one for node. Run them with `yarn dev`, eg `cd examples/browser && yarn dev`

### Running test
`yarn test` will launch a test docker backend.

`yarn test` will launch a test docker backend.
`yarn test:run` will run against the docker backend you have running. But CAUTION, it will delete data.

### Pushing to npm
The goal of the design is that this will be added to our github action releases so that the JS API is always up to date and pinned against the python backend API.

The goal of the design is that this will be added to our github action releases so that the JS API is always up to date and pinned against the python backend API.

`npm publish` pushes the `package.json` defined packaged to the package manager for authenticated users.

Expand Down
19 changes: 8 additions & 11 deletions clients/js/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Chroma is the open-source embedding database. Chroma makes it easy to build LLM apps by making knowledge, facts, and skills pluggable for LLMs.

This package gives you a JS/TS interface to talk to a backend Chroma DB over REST.
This package gives you a JS/TS interface to talk to a backend Chroma DB over REST.

[Learn more about Chroma](https://github.com/chroma-core/chroma)

Expand All @@ -13,23 +13,20 @@ This package gives you a JS/TS interface to talk to a backend Chroma DB over RES

## Getting started

Chroma needs to be running in order for this client to talk to it. Please see the [🧪 Usage Guide](https://docs.trychroma.com/usage-guide) to learn how to quickly stand this up.
Chroma needs to be running in order for this client to talk to it. Please see the [🧪 Usage Guide](https://docs.trychroma.com/usage-guide) to learn how to quickly stand this up.

## Small example


```js
import { ChromaClient } from "chromadb"
import { ChromaClient } from "chromadb";
const chroma = new ChromaClient("http://localhost:8000");
const collection = await chroma.createCollection("test-from-js");
for (let i = 0; i < 20; i++) {
await collection.add(
"test-id-" + i.toString(),
[1, 2, 3, 4, 5],
{ "test": "test" }
)
await collection.add("test-id-" + i.toString(), [1, 2, 3, 4, 5], {
test: "test",
});
}
const queryData = await collection.query([1, 2, 3, 4, 5], 5, { "test": "test" });
const queryData = await collection.query([1, 2, 3, 4, 5], 5, { test: "test" });
```

## Local development
Expand All @@ -38,4 +35,4 @@ const queryData = await collection.query([1, 2, 3, 4, 5], 5, { "test": "test" })

## License

Apache 2.0
Apache 2.0
6 changes: 6 additions & 0 deletions clients/js/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# OpenAPI Generator Plus generator configuration
inputPath: openapi.json
outputPath: src/generated
generator: "@openapi-generator-plus/typescript-fetch-client-generator"
# See https://github.com/karlvr/openapi-generator-plus-generators/tree/master/packages/typescript-fetch-node-client#readme for more configuration options

8 changes: 4 additions & 4 deletions clients/js/examples/browser/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Demo in browser
## Demo in browser

Update your settings to add `localhost:3000` to `chroma_server_cors_allow_origins`.
Update your settings to add `localhost:3000` to `chroma_server_cors_allow_origins`.

For example:

Expand All @@ -11,5 +11,5 @@ client = chromadb.Client(

```

1. `yarn dev`
2. visit `localhost:3000`
1. `yarn dev`
2. visit `localhost:3000`
29 changes: 13 additions & 16 deletions clients/js/examples/browser/app.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,36 @@
// import env.ts
import { ChromaClient } from "../../src/index"
import { ChromaClient } from "../../src/index";

window.onload = async () => {
const chroma = new ChromaClient("http://localhost:8000");
await chroma.reset()
await chroma.reset();

const collection = await chroma.createCollection("test-from-js");
console.log("collection", collection)
console.log("collection", collection);

// first generate some data
var ids: string[] = [];
var embeddings: Array<any> = []
var metadata: Array<any> = []
var embeddings: Array<any> = [];
var metadata: Array<any> = [];
for (let i = 0; i < 100; i++) {
ids.push("test-id-" + i.toString());
embeddings.push([1, 2, 3, 4, 5]);
metadata.push({ "test": "test" });
metadata.push({ test: "test" });
}

let add = await collection.add(
ids,
embeddings,
metadata
)
console.log("add", add)
let add = await collection.add(ids, embeddings, metadata);
console.log("add", add);

let count = await collection.count();
console.log("count", count);

const queryData = await collection.query([1, 2, 3, 4, 5], 5, { "test": "test" });
const queryData = await collection.query([1, 2, 3, 4, 5], 5, {
test: "test",
});

console.log("queryData", queryData);

await collection.delete()
await collection.delete();

let count2 = await collection.count();
console.log("count2", count2);
Expand All @@ -50,5 +48,4 @@ window.onload = async () => {
// node!.innerHTML = `<pre>${JSON.stringify(getData, null, 4)}</pre>`;
// node = document.querySelector("#collection-query");
// node!.innerHTML = `<pre>${JSON.stringify(queryData, null, 4)}</pre>`;

};
};
13 changes: 8 additions & 5 deletions clients/js/examples/browser/index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta charset="utf-8" />
<title>Demo App</title>
<script type="module" src="app.ts"></script>
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
<link
rel="stylesheet"
href="https://unpkg.com/sakura.css/css/sakura.css"
type="text/css"
/>
</head>
<body>
<h3>Page intentionally left blank</h3>
Expand All @@ -27,6 +31,5 @@ <h3>Collection Get</h3>
<h3>Collection Query</h3>
<div id="collection-query">Fetching data from server</div>
</div> -->

</body>
</html>
</html>
Loading