fix: tweak & fix doc pages

effectai · May 14, 2024 · 93fa132 · 93fa132
1 parent 89ebb72
commit 93fa132
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 244 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/pages/docs/collecting-data/create-a-template.mdx b/docs/pages/docs/collecting-data/create-a-template.mdx
@@ -6,8 +6,12 @@ A template is a blueprint for the tasks in a campaign. It defines the structure
 Templates are created by the data requester (you) and can be reused across multiple campaigns.
 
 A typical template will be a HTML file that contains the structure of the tasks. The template can contain placeholders for the input data, output data, and other dynamic content.
+In this case, we aim to determine whether an image depicts a Chihuahua or a muffin. 
+Our template should include the following:
 
-For this guide, we will create a simple template for an image labeling campaign. The template contains a title, an image, and a question for the workers to answer. The image is loaded from IPFS using the `ipfs` placeholder.
+- Load an Image: Implement functionality to load images within the campaign interface. Users should be able to view and analyze each image provided.
+
+- HTML Form: Integrate an HTML form into the campaign template. This form will allow annotators to make their selection regarding whether the displayed image is a Chihuahua or a muffin. The form should be user-friendly and intuitive, guiding annotators through the decision-making process.
 
 ```html
 <html>
@@ -18,24 +22,20 @@ For this guide, we will create a simple template for an image labeling campaign.
     <form>
         <div class="classify-image">
             <h1 class="title">Classify The Image</h1>
-
               <!-- The image loaded from IPFS  -->
-            <img src='https://gateway.pinata.cloud/ipfs/${ipfs}'/>
+            <img src='https://gateway.pinata.cloud/ipfs/${ipfs_url}'/>
         </div>
         <div class="question question-sentiment">
               <!-- Our question to ask the workers-->
-            <h2 class="subtitle">How much does this resemble the original one?</h2>
+            <h2 class="subtitle">Is this an image of a Chihuahua or a Muffin?</h2>
 
               <!-- Input options for the workers-->
             <div class="field">
-                <input class="is-checkradio" id="full" value="full" type="radio" name="resemblance" required>
-                <label for="full">Completly</label>
-                <input class="is-checkradio" id="half" value="half" type="radio" name="resemblance">
-                <label for="half">Half</label>
-                <input class="is-checkradio" id="none" value="none" type="radio" name="resemblance">
-                <label for="none">Nothing At All</label>
+                <input class="is-checkradio" id="chihuahua" value="chihuahua" type="radio" name="resemblance" required>
+                <label for="full">Chihuahua</label>
+                <input class="is-checkradio" id="muffin" value="muffin" type="radio" name="resemblance">
+                <label for="half">Muffin</label>
             </div>
-
         </div>
 
         <!-- Submit button so workers can submit their data -->
@@ -50,6 +50,9 @@ setTimeout(() => console.log(window.FORCE_PLACEHOLDERS), 1000)
 </html>
 ```
 
+In the above template, we are making use of a placeholder `${ipfs_url}` 
+This value will be filled with our images when we create the tasks.
+
 You can find examples for different types of templates on our [github](https://github.com/effectai/effect-force-templates)
 We highly recommended to follow the [template guide](/docs/templates/introduction) when you are creating your own template.
 

diff --git a/docs/pages/docs/collecting-data/introduction.mdx b/docs/pages/docs/collecting-data/introduction.mdx
@@ -0,0 +1,17 @@
+# Data Collection
+The primary use case of the Effect Network SDK revolves around leveraging its capabilities for data collection. In this section, we'll guide you through setting up your first data collection campaign. 
+Whether you're building AI models, conducting surveys, or enhancing automated processes,
+the Effect Network offers a robust infrastructure to support your needs in a completely open, decentralized an transparent way.
+
+## Image annotation for AI training
+
+For this tutorial, let's dive into a practical example: utilizing the Effect AI Network to annotate images distinguishing between a **chihuahua** and a **muffin**.
+This annotated data will serve as training material for our AI model.
+It's important to note that this is just one of many potential applications. Other examples include:
+
+- Gathering survey data from a specific target audience
+- Employing the Effect AI Network for final quality checks in a Language Model (LLM) pipeline for automated transcriptions
+- Playing chess against a random human
+- Many more!
+
+Please check out our [example folder](https://github.com/effectai/effect-js/tree/dev/examples) on github if you want to check out other examples or want to contribute!
diff --git a/docs/pages/docs/getting-started.mdx b/docs/pages/docs/getting-started.mdx
@@ -24,59 +24,47 @@ pnpm i @effectai/sdk
 
 ### 1. Import and Instantiate the EffectAI Client
 
-Here the handy dandy `createClient` function is used to create a client instance.
-It can three arguments, the first one is the network configuration,
-the second one is the a session object, and the third one is the options object.
-
-In this quick start guide we will be focusing on the first two, 
-how to get started with a non authenticated client using the network configuration and 
-an authenticated client using the session object.
-
-You can read more about the options object in the [ClientOptions](#client-options) section.
+:::code-group
 
-Here is an example of how to create a client with a network configuration.
+```ts twoslash [EOS Testnet]
+import {
+	createClient,
+	jungle4
+} from "@effectai/sdk";
 
-```ts twoslash
-// [!include ~/snippets/getting-started/getting-started-init.ts]
+// Create client
+const client = await createClient({ network: jungle4 });
 ```
 
+```ts twoslash [EOS Mainnet]
+import {
+	createClient,
+	eos
+} from "@effectai/sdk";
 
-### 2. Interact with the Client
-
-The sdk is built using a stateless model, meaning that all the functions are pure 
-and (almost) does not mutate the client object.
-In practice this means that you wiil need to create a client object, 
-and pass it as an argument to the functions you want to use.
-
-Here is an example of how to retrieve an Effect account by using its ID.
-
-```ts twoslash
-// [!include ~/snippets/getting-started/getting-started-nonauth.ts]
+const client = await createClient({ network: eos });
 ```
+:::
 
-### 3. Set up wallet and session
-
-If you want to make transactions, such as creating a new account, creating a new tasks, 
-or transfering tokens, you need to set up a wallet and a session.
-The wallet plugin is an interface that allows you to sign transactions and interact with the blockchain.
-
-Currently the SDK does not come with any wallet plugins, 
-and you will need to use one provided by [wharfkit.com](https://wharfkit.com/).
-A list of plugins can be found at [wharfkit.com/plugins](https://wharfkit.com/plugins?sort=popular)
-
-In this example we will use the [`@wharfkit/wallet-plugin-privatekey`](https://wharfkit.com/plugins/wallet-plugin-privatekey) plugin, which requres a private key to be passed in.
-
-Afterwards we can set up the Session object, which allows us to specify other parameters like 
-the actor, permission, and the blockchain netork.
 
-Last but not least we connect the session to the client, and the client will be ready to use.
+### 2. Use the client
+```ts twoslash 
+import {
+	createClient,
+	eos
+} from "@effectai/sdk";
+const client = await createClient({ network: eos });
+// ---cut---
+import {
+	getCampaigns
+} from "@effectai/sdk";
 
-```ts twoslash
-// [!include ~/snippets/getting-started/getting-started-auth.ts]
+const campaigns = await getCampaigns({ client });
 ```
 
-## Conclusion 
 
-Now that we have a basic understaning of how to set up the client, we can move on to more advanced topics.
+## What's next ? 
+
+Now that we have a basic understanding of how to set up the client, we can move on to more advanced topics, like creating our first data collection campaign.
 Read more on the following pages.
 
diff --git a/docs/sidebar.ts b/docs/sidebar.ts
@@ -7,7 +7,6 @@ export const sidebar = {
 			items: [
 				{ text: "Why Effect AI", link: "/docs/introduction" },
 				{ text: "Getting Started", link: "/docs/getting-started" },
-				{ text: "Local Development", link: "/docs/local-development" },
 			],
 		},
 		{

diff --git a/docs/snippets/tasks/create-campaign.ts b/docs/snippets/tasks/create-campaign.ts
@@ -1,18 +1,27 @@
 import { WalletPluginPrivateKey } from "@wharfkit/wallet-plugin-privatekey";
 import {
-	createCampaign,
 	Session,
 	jungle4 as chain,
-	type CreateCampaignArgs,
 	createClient,
 } from "@effectai/sdk";
 
+const session = new Session({
+	actor: "your-account",
+	permission: "permission-level",
+	chain,
+	walletPlugin: new WalletPluginPrivateKey("your-private-key"),
+});
+
+const client = await createClient({ session });
+// ---cut---
+import { createCampaign, type CreateCampaignArgs } from "@effectai/sdk";
+
 const myNewCampaign: CreateCampaignArgs["campaign"] = {
 	version: 1.0,
 	maxTaskTime: 100,
 	reward: 3.5,
-	title: "Labelstudio OCR (LAION)",
-	description: "Description of the ttask here.",
+	title: "My First Campaign!",
+	description: "Description of the task here.",
 	instructions: "Some instructions here",
 	template: "<h1>Template here</h1>",
 	input_schema: null,
@@ -23,13 +32,4 @@ const myNewCampaign: CreateCampaignArgs["campaign"] = {
 	estimated_time: 10,
 };
 
-const session = new Session({
-	actor: "your-account",
-	permission: "permission-level",
-	chain,
-	walletPlugin: new WalletPluginPrivateKey("your-private-key"),
-});
-
-const client = await createClient({ session });
-const result = await createCampaign({ client, campaign: myNewCampaign });
-console.log(result);
+const campaign = await createCampaign({ client, campaign: myNewCampaign });
diff --git a/src/.gitignore b/src/.gitignore
diff --git a/src/bun.lockb b/src/bun.lockb