Skip to content

Commit

Permalink
Add templates
Browse files Browse the repository at this point in the history
Signed-off-by: Jay Wang <[email protected]>
  • Loading branch information
xiaohk committed Feb 9, 2024
1 parent 9a7a884 commit ecf33c7
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -481,12 +481,13 @@

.search-time-info {
position: absolute;
top: 0px;
bottom: 0px;
left: 50%;
width: 100%;
transform: translate(-50%, calc(-100% - 5px));
transform: translate(-50%, calc(100% + 5px));
font-size: var(--font-d2);
color: var(--gray-600);
color: var(--gray-500);
white-space: nowrap;

display: flex;
flex-flow: column;
Expand Down
33 changes: 18 additions & 15 deletions examples/rag-playground/src/components/playground/playground.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { customElement, property, state, query } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { EmbeddingModel } from '../../workers/embedding';
import d3 from '../../utils/d3-import';
import {
UserConfigManager,
UserConfig,
Expand Down Expand Up @@ -36,9 +37,8 @@ import TextGenLocalWorkerInline from '../../llms/web-llm?worker&inline';
import EmbeddingWorkerInline from '../../workers/embedding?worker';
import gearIcon from '../../images/icon-gear.svg?raw';

const STORE_ENDPOINT = import.meta.env.DEV
? '/data/'
: 'https://pub-4eccf317e01e4aa3a5caa9991c8b1e2a.r2.dev/';
const REMOTE_ENDPOINT = 'https://pub-4eccf317e01e4aa3a5caa9991c8b1e2a.r2.dev/';
const STORE_ENDPOINT = import.meta.env.DEV ? '/data/' : REMOTE_ENDPOINT;

interface DatasetInfo {
dataURL: string;
Expand Down Expand Up @@ -90,15 +90,15 @@ const datasets: Record<Dataset, DatasetInfo> = {
},

[Dataset.DiffusionDB10k]: {
indexURL: STORE_ENDPOINT + 'diffusiondb-prompt-index-10k.json.gzip',
dataURL: STORE_ENDPOINT + 'diffusiondb-prompt-10k.ndjson.gzip',
indexURL: REMOTE_ENDPOINT + 'diffusiondb-prompt-index-10k.json.gzip',
dataURL: REMOTE_ENDPOINT + 'diffusiondb-prompt-10k.ndjson.gzip',
datasetName: 'diffusiondb-prompts-10k',
datasetNameDisplay: 'DiffusionDB Prompts (10k)'
},

[Dataset.DiffusionDB100k]: {
indexURL: STORE_ENDPOINT + 'diffusiondb-prompt-index-100k.json.gzip',
dataURL: STORE_ENDPOINT + 'diffusiondb-prompt-100k.ndjson.gzip',
indexURL: REMOTE_ENDPOINT + 'diffusiondb-prompt-index-100k.json.gzip',
dataURL: REMOTE_ENDPOINT + 'diffusiondb-prompt-100k.ndjson.gzip',
datasetName: 'diffusiondb-prompts-100k',
datasetNameDisplay: 'DiffusionDB Prompts (100k)'
},
Expand Down Expand Up @@ -127,6 +127,7 @@ const datasets: Record<Dataset, DatasetInfo> = {

const DEV_MODE = import.meta.env.DEV;
const USE_CACHE = true && DEV_MODE;
const FORMATTER = d3.format(',');

/**
* Playground element.
Expand Down Expand Up @@ -694,6 +695,7 @@ export class MememoPlayground extends LitElement {
<div class="container container-input">
<mememo-query-box
curDataset=${this.curDataset}
@runButtonClicked=${(e: CustomEvent<string>) =>
this.userQueryRunClickHandler(e)}
@queryEdited=${() => this._deactivateAllArrows()}
Expand All @@ -703,17 +705,18 @@ export class MememoPlayground extends LitElement {
<div class="container container-search">
<div class="search-box">
<div
class="search-time-info"
?is-hidden=${this.searchRunTime === null}
>
<div class="search-time-info" ?is-hidden=${true}>
<span class="row"
>encode:
${this.searchRunTime ? this.searchRunTime[0] : ''}ms</span
${this.searchRunTime
? FORMATTER(this.searchRunTime[0])
: ''}ms</span
>
<span class="row"
>retrieval:
${this.searchRunTime ? this.searchRunTime[1] : ''}ms</span
${this.searchRunTime
? FORMATTER(this.searchRunTime[1])
: ''}ms</span
>
</div>
Expand Down Expand Up @@ -791,8 +794,8 @@ export class MememoPlayground extends LitElement {
</div>
</div>
<div class="model-time-info" ?is-hidden=${this.LLMRunTime === null}>
${`${this.LLMRunTime}ms`}
<div class="model-time-info" ?is-hidden=${true}>
${this.LLMRunTime === null ? '' : FORMATTER(this.LLMRunTime)}ms
</div>
</div>
</div>
Expand Down
33 changes: 28 additions & 5 deletions examples/rag-playground/src/components/query-box/query-box.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { LitElement, css, unsafeCSS, html, PropertyValues } from 'lit';
import { customElement, property, state, query } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Dataset } from '../playground/playground';
import { userQueries } from '../../config/userQueries';
import d3 from '../../utils/d3-import';

import componentCSS from './query-box.css?inline';
import searchIcon from '../../images/icon-search.svg?raw';
Expand All @@ -16,16 +19,17 @@ export class MememoQueryBox extends LitElement {
//==========================================================================||
// Class Properties ||
//==========================================================================||
@property({ type: String })
curDataset: Dataset | undefined;

@state()
userQuery: string;
defaultQuery: string;

//==========================================================================||
// Lifecycle Methods ||
//==========================================================================||
constructor() {
super();
this.defaultQuery =
'What are some ways to integrate information retrieval into machine learning?';
this.userQuery = this.defaultQuery;
}

Expand All @@ -49,7 +53,11 @@ export class MememoQueryBox extends LitElement {
* This method is called before new DOM is updated and rendered
* @param changedProperties Property that has been changed
*/
willUpdate(changedProperties: PropertyValues<this>) {}
willUpdate(changedProperties: PropertyValues<this>) {
if (changedProperties.has('curDataset') && this.curDataset) {
this.userQuery = userQueries[this.curDataset][0];
}
}

//==========================================================================||
// Custom Methods ||
Expand All @@ -65,6 +73,21 @@ export class MememoQueryBox extends LitElement {
//==========================================================================||
// Event Handlers ||
//==========================================================================||
randomButtonClicked() {
if (this.curDataset) {
const allQueries = userQueries[this.curDataset];
const i = d3.randomInt(allQueries.length)();
this.userQuery = allQueries[i];

// Notify the parent
const event = new Event('queryEdited', {
bubbles: true,
composed: true
});
this.dispatchEvent(event);
}
}

textareaInput(e: InputEvent) {
const textareaElement = e.currentTarget as HTMLTextAreaElement;
this.userQuery = textareaElement.value;
Expand Down Expand Up @@ -101,7 +124,7 @@ export class MememoQueryBox extends LitElement {
<span class="text">User Query</span>
<div class="button-group">
<button>
<button @click=${() => this.randomButtonClicked()}>
<span class="svg-icon">${unsafeHTML(refreshIcon)}</span>
random
</button>
Expand Down
18 changes: 12 additions & 6 deletions examples/rag-playground/src/config/promptTemplates.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
import { Dataset } from '../components/playground/playground';

const arXivTemplates =
"You are an expert in machine learning, and you are answering a user's questions about machine learning. The user's question is in <user></user>. You have access to documents in <context></context>. Your answer should be solely based on the provided documents. Provide cite the document source if possible. Answer your question in an <output></output> tag.\n\n<user>{{user}}</user>\n\n<context>{{context}}</context>";
"You are an expert in machine learning, and you are answering a user's questions about machine learning. The user's question is in <user></user>. You have access to documents in <context></context>. Your answer should be solely based on the provided documents. Provide cite the document source using numbers in square brackets.\n\n<user>{{user}}</user>\n\n<context>{{context}}</context>";

const diffusiondbTemplates =
"You are an expert in prompt engineering text-to-image generative models. You are helping a user improve their prompts. The user's prompt is in <user></user>. You have access to example prompts in <context></context>. Your answer should be based on the example documents. Make the user's prompt more interesting and effective. Cite example prompts to explain your improvement.\n\n<user>{{user}}</user>\n\n<context>{{context}}</context>";

const accidentTemplates =
"You are an expert in envisioning potential harms of AI technologies. You are helping a user to brainstorm potentially negative consequences of technologies. The user's question is in <user></user>. You have access to real AI accident reports in <context></context>. Your answer should be solely based on the provided documents. Provide cite the document source using numbers in square brackets.\n\n<user>{{user}}</user>\n\n<context>{{context}}</context>";

export const promptTemplates: Record<Dataset, string> = {
'arxiv-1k': arXivTemplates,
'arxiv-10k': arXivTemplates,
'arxiv-120k': arXivTemplates,
'diffusiondb-10k': arXivTemplates,
'diffusiondb-100k': arXivTemplates,
'diffusiondb-500k': arXivTemplates,
'diffusiondb-1m': arXivTemplates,
'accident-3k': arXivTemplates
'diffusiondb-10k': diffusiondbTemplates,
'diffusiondb-100k': diffusiondbTemplates,
'diffusiondb-500k': diffusiondbTemplates,
'diffusiondb-1m': diffusiondbTemplates,
'accident-3k': accidentTemplates
};
83 changes: 83 additions & 0 deletions examples/rag-playground/src/config/userQueries.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { Dataset } from '../components/playground/playground';

const arXivQueries = [
'How to integrate information retrieval into machine learning systems?',
'What are the best practices for preprocessing data for machine learning models?',
'How can we improve the interpretability of deep learning models?',
'What are effective methods for dealing with imbalanced datasets in classification tasks?',
'How can transfer learning be applied to small datasets in a specific domain?',
'What are the challenges and solutions for real-time machine learning predictions?',
'How can unsupervised learning techniques improve data understanding in unlabeled datasets?',
'What are the key factors in choosing between traditional machine learning algorithms and deep learning approaches?',
'How can machine learning be used to enhance cybersecurity defenses?',
'What are the ethical considerations in developing and deploying machine learning models?',
'How can reinforcement learning be applied to optimize decision-making processes in business?',
'What are the current limitations of natural language processing models, and how can they be addressed?',
'How can machine learning contribute to personalized medicine and healthcare?',
'What strategies can be used to reduce overfitting in complex machine learning models?',
'How can machine learning algorithms be adapted for energy-efficient computing?',
'What are the implications of federated learning for privacy-preserving machine learning?',
'How can anomaly detection be improved in machine learning models for fraud detection?',
'What role does feature engineering play in improving the performance of machine learning models?',
'How can machine learning be integrated with blockchain technology for enhanced security?',
'What are the challenges in scaling machine learning models for large-scale applications?',
'How can machine learning techniques be applied to predict and mitigate the effects of climate change?'
];

const diffusiondbQueries: string[] = [
'A cute brown dog jumping around',
'White dog wandering through a dense forest',
'Red apple resting on an aged wooden table',
'Sunny field dotted with vibrant sunflowers',
'Blue boat gently floating on a tranquil lake',
'Green frog perched on a lily pad, eyeing its surroundings',
'Brown horse galloping across a wide-open meadow',
'Gray cat curled up, napping on a cozy windowsill',
'Black bicycle leaning against a graffiti-covered city wall',
'Orange pumpkin nestled among leaves in a patch',
"Pink flamingo standing gracefully at the water's edge",
'Purple butterfly fluttering around a fragrant lavender bush',
'Goldfish swimming circles in a sparkling fishbowl',
'Rainbow arching majestically over a lush mountain landscape',
'Silver key lying atop an ancient, leather-bound book',
'Colorful parrot perched in the dense canopy of a tropical jungle',
'Snowman adorned with a carrot nose in a snowy field',
'Red and white lighthouse standing guard by the rocky coastline',
'Blue and yellow beach umbrella casting a cool shadow on sandy shores',
'Chocolate cupcake topped with a rich, creamy swirl on a festive plate',
"Pair of red sneakers ready at the start line of a running track'"
];

const accidentQueries: string[] = [
'What are some potential harms associated with facial recognition systems?',
'How could a loan approval ML system inadvertently reinforce existing societal biases?',
'What risks are involved with an ML-based healthcare diagnosis tool providing incorrect treatment recommendations?',
'How might a job applicant screening ML system discriminate against certain candidates based on non-job-related characteristics?',
'What if an autonomous driving ML system fails to correctly interpret road signs or pedestrian signals in different weather conditions?',
'Could an ML content recommendation system on social media promote harmful or extremist content?',
'What are the privacy concerns with an ML-powered personal assistant listening to and analyzing private conversations?',
'How might an ML-powered stock trading system contribute to market instability or unfair trading advantages?',
'What if an ML-based wildfire prediction system provides inaccurate forecasts, leading to insufficient disaster preparedness?',
'How could an ML model used for educational content personalization create learning gaps or reinforce stereotypes?',
'What are the implications of an ML system for energy grid management malfunctioning and causing widespread power outages?',
'How might an ML-powered emotion detection system in advertising manipulate consumer behavior unethically?',
'What if an ML model used in wildlife conservation misidentifies species and leads to inappropriate conservation efforts?',
'Could an ML-based sentencing recommendation tool in the legal system perpetuate racial or gender biases?',
'What are the potential consequences of an ML-driven agricultural advice system providing incorrect farming guidance?',
"How might an ML-based air traffic control system's malfunction lead to flight safety risks?",
'What if an ML algorithm for detecting online bullying overlooks certain forms of harassment, leaving victims unprotected?',
"How could an ML-powered credit scoring system unfairly lower someone's credit score based on non-financial personal data?",
'What if an ML-based disaster response system prioritizes resources in a way that discriminates against certain communities?',
'How might an ML system designed to filter out fake news inadvertently censor legitimate information or viewpoints?'
];

export const userQueries: Record<Dataset, string[]> = {
'arxiv-1k': arXivQueries,
'arxiv-10k': arXivQueries,
'arxiv-120k': arXivQueries,
'diffusiondb-10k': diffusiondbQueries,
'diffusiondb-100k': diffusiondbQueries,
'diffusiondb-500k': diffusiondbQueries,
'diffusiondb-1m': diffusiondbQueries,
'accident-3k': accidentQueries
};
2 changes: 1 addition & 1 deletion examples/rag-playground/src/llms/mememo-gen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export interface PromptRunPostBody {
}

const ENDPOINT =
'https://o2r71c10cd.execute-api.localhost.localstack.cloud:4566/prod/run';
'https://aq079yrw81.execute-api.us-east-1.amazonaws.com/prod/run';

/**
* Use mememo to generate text based on a given prompt
Expand Down

0 comments on commit ecf33c7

Please sign in to comment.