Add initial safety settings to generateText

src/app/generative-ai-palm/v1beta2/text.service.ts

@@ -23,17 +23,17 @@ export class TextServiceClient {
  text = text + ". Be very brief in your response so they can be read out loud. Don't use Markdown tables and code fences.";
  let prompt: TextRequest = createTextRequest(model, text, undefined, undefined, undefined, undefined, undefined, 
  [ { "category": HarmCategory.HARM_CATEGORY_DEROGATORY,
- "threshold": SafetySetting.HarmBlockThreshold.BLOCK_NONE }, 
+ "threshold": SafetySetting.HarmBlockThreshold.BLOCK_LOW_AND_ABOVE }, 
  { "category": HarmCategory.HARM_CATEGORY_TOXICITY, 
- "threshold": SafetySetting.HarmBlockThreshold.BLOCK_NONE }, 
+ "threshold": SafetySetting.HarmBlockThreshold.BLOCK_LOW_AND_ABOVE }, 
  { "category": HarmCategory.HARM_CATEGORY_VIOLENCE, 
- "threshold": SafetySetting.HarmBlockThreshold.BLOCK_NONE }, 
+ "threshold": SafetySetting.HarmBlockThreshold.BLOCK_LOW_AND_ABOVE }, 
  { "category": HarmCategory.HARM_CATEGORY_SEXUAL, 
- "threshold": SafetySetting.HarmBlockThreshold.BLOCK_NONE },
+ "threshold": SafetySetting.HarmBlockThreshold.BLOCK_LOW_AND_ABOVE },
  { "category": HarmCategory.HARM_CATEGORY_MEDICAL, 
- "threshold": SafetySetting.HarmBlockThreshold.BLOCK_NONE }, 
+ "threshold": SafetySetting.HarmBlockThreshold.BLOCK_LOW_AND_ABOVE }, 
  { "category": HarmCategory.HARM_CATEGORY_DANGEROUS, 
- "threshold": SafetySetting.HarmBlockThreshold.BLOCK_NONE }]
+ "threshold": SafetySetting.HarmBlockThreshold.BLOCK_LOW_AND_ABOVE }]
  , undefined);
 
  return firstValueFrom(

src/app/rich-text-editor/prompt-ideas.ts

@@ -1,4 +1,5 @@
 export const promptIdeas = [
+`Create a sinister, derogatory, sexual, scary Halloween tale including medical references.`, /* test safety */
 //`Explain Quantum mechanics using 2 formulas with katex and a simple diagram using MermaidJS.`,
 `Strip out the HTML elements and keep the original tweet and emojis: <Embed Tweet>.`,
 //`Summarise each character in [show] with emojis. [show]=Friends`,

src/app/rich-text-editor/quill-warning.blot.ts

@@ -0,0 +1,22 @@
+import Quill from 'quill';
+const BlockEmbed = Quill.import('blots/block/embed');
+
+class Warning extends BlockEmbed {
+
+ static create(value: string) {
+ const node = super.create(value) as HTMLSpanElement;
+ node.innerText = value;
+ node.contentEditable = 'false';
+ return node;
+ }
+
+ static value(node: HTMLElement) {
+ return node.childNodes[0].textContent;
+ }
+}
+
+Warning['blotName'] = 'warning';
+Warning['tagName'] = 'SPAN';
+Warning['className'] = 'ql-warning';
+
+Quill.register({ 'formats/label': Warning }); 

src/app/rich-text-editor/rich-text-editor.component.ts

@@ -2,6 +2,7 @@ import { Component, EventEmitter, HostListener, Output } from '@angular/core';
 import { ContentChange } from 'ngx-quill';
 import { Quill } from 'quill';
 import './quill-label.blot';
+import './quill-warning.blot';
 import './quill-text-only.clipboard';
 import './quill-markdown.module';
 import { promptIdeas as PROMPTS } from './prompt-ideas'
@@ -104,7 +105,7 @@ export class RichTextEditorComponent {
  return text.trim().substring(0, 8196);
  }
 
- insertAndFormatMarkdown(text: string) {
+ insertAndFormatMarkdown(text: string, error: boolean = false) {
  //remove language from markdown fences
  /* const processedMarkdown = text.replace(/```(\w*)\n([\s\S]*?)```/g, (match, language, code) => {
  return `\n\`\`\`\n${code}\`\`\`\n`;
@@ -123,9 +124,15 @@ export class RichTextEditorComponent {
  this.quillInstance.insertText(index, text, 'api');
  this.quillInstance.update('api');
 
- this.quillInstance.formatText(index, length-1, {
- 'background-color': 'rgb(200, 200, 200)'
- });
+ if (error) {
+ this.quillInstance.formatText(index, length - 1, {
+ 'background-color': 'rgb(200, 0, 0)'
+ });
+ } else {
+ this.quillInstance.formatText(index, length - 1, {
+ 'background-color': 'rgb(200, 200, 200)'
+ });
+ }
  this.quillInstance.update('api');
 
  this.quillInstance.insertText(index + length, '\n');
@@ -143,15 +150,20 @@ export class RichTextEditorComponent {
  }
  }
 
- insertAndFormat(text:string) {
+ insertAndFormat(text: string, error: boolean = false) {
  var range = this.quillInstance.getSelection();
  if (range) {
  if (range.length > 0) return; // range selected ignore
  const index = range.index;
  const length = text.length;
 
- this.quillInstance.insertEmbed(index, 'label', text, 'user');
- this.quillInstance.update('user');
+ if (error) {
+ this.quillInstance.insertEmbed(index, 'warning', text, 'user');
+ this.quillInstance.update('user');
+ } else {
+ this.quillInstance.insertEmbed(index, 'label', text, 'user');
+ this.quillInstance.update('user');
+ }
 
  /* this.quillInstance.setText(text);
  this.quillInstance.formatText(index, length, { // unbolds 'hello' and set its color to blue

src/app/text/text.component.scss

@@ -22,6 +22,9 @@ button.run .mat-icon {
 ::ng-deep .ql-label {
  background-color: #e0e0e0;
 }
+::ng-deep .ql-warning {
+ background-color: #e0e0e0;
+}
 
 .options {
  padding: 20px 0px 250px 0px;

src/app/text/text.component.ts

@@ -1,9 +1,10 @@
 import { Component, Inject, ViewChild } from '@angular/core';
-import { PREDICTION_SERVICE_CLIENT_TOKEN } from '../generative-ai-vertex/vertex.module';
-import { PredictionServiceClient } from '../generative-ai-vertex/v1/prediction.service';
-import { TextResponse } from '../generative-ai-vertex/v1/vertex.types';
-//import { TEXT_SERVICE_CLIENT_TOKEN } from '../generative-ai-palm/palm.module';
-//import { TextServiceClient } from '../generative-ai-palm/v1beta2/text.service';
+// import { PREDICTION_SERVICE_CLIENT_TOKEN } from '../generative-ai-vertex/vertex.module';
+// import { PredictionServiceClient } from '../generative-ai-vertex/v1/prediction.service';
+// import { TextResponse } from '../generative-ai-vertex/v1/vertex.types';
+import { TEXT_SERVICE_CLIENT_TOKEN } from '../generative-ai-palm/palm.module';
+import { TextServiceClient } from '../generative-ai-palm/v1beta2/text.service';
+import { TextResponse } from '../generative-ai-palm/v1beta2/palm.types';
 import { RichTextEditorComponent } from '../rich-text-editor/rich-text-editor.component';
 import { AudioService } from '../read/audio.service';
 const MAX_PHRASES = 10;
@@ -20,8 +21,8 @@ export class TextComponent {
  playing: boolean = false;
 
  constructor(
- //@Inject(TEXT_SERVICE_CLIENT_TOKEN) public client: TextServiceClient,
- @Inject(PREDICTION_SERVICE_CLIENT_TOKEN) public client: PredictionServiceClient,
+ @Inject(TEXT_SERVICE_CLIENT_TOKEN) public client: TextServiceClient,
+ //@Inject(PREDICTION_SERVICE_CLIENT_TOKEN) public client: PredictionServiceClient,
  private audio: AudioService
  ) { }
 
@@ -34,8 +35,15 @@ export class TextComponent {
  const prompt = this.editor.extractPrompt();
 
  // PaLM
- //const response = await this.client.generateText(prompt);
- //const text = (response?.candidates?.[0].output || '').trim();
+ const response = await this.client.generateText(prompt);
+ debugger;
+ if (response.filters && response.filters.length > 0){
+ this.logBlockedResponse(prompt, response);
+ this.editor.insertAndFormat("Response was blocked. Try changing your prompt to avoid any derogatory, toxic, sexual, violent, dangerous or medical related content.", true);
+ } else {
+ const text = (response?.candidates?.[0].output || '').trim();
+ this.editor.insertAndFormat(text);
+ }
 
  // Vertex AI
  //const response: TextResponse = await this.client.predict(prompt);
@@ -45,17 +53,17 @@ export class TextComponent {
  // }
 
  // Vertex AI Stream
- this.client.streamingPredict(prompt).subscribe({
- next: (response: any) => {
- console.log('stream-chunk');
- response.forEach( (element: any) => {
- const text = (element.outputs?.[0].structVal?.content?.stringVal?.[0]).trim();
- this.editor.insertStream(text);
- });
- },
- complete: () => { console.log('stream-end'); },
- error: (error) => { console.log(error); }
- })
+ // this.client.streamingPredict(prompt).subscribe({
+ //  next: (response: any) => {
+ //  console.log('stream-chunk');
+ //  response.forEach( (element: any) => {
+ //  const text = (element.outputs?.[0].structVal?.content?.stringVal?.[0]).trim();
+ //  this.editor.insertStream(text);
+ //  });
+ //  },
+ //  complete: () => { console.log('stream-end'); },
+ //  error: (error) => { console.log(error); }
+ // })
  }
 
  clear() {
@@ -87,5 +95,14 @@ export class TextComponent {
  });
  return text;
  }
+
+ private logBlockedResponse(prompt: string, response: TextResponse) {
+ if (!response.filters || response.filters.length == 0) return;
+
+ console.log("Response was blocked.");
+ console.log(`Original prompt: ${prompt}`);
+ console.log(`Filters applied:\n${JSON.stringify(response.filters, null, " ")}`);
+ console.log(`Safety settings and category ratings:\n${JSON.stringify(response.safetyFeedback, null, " ")}`);
+ }
 }