forked from prehistoric-systems/chatpad
add characters, formats, styles and tones
This commit is contained in:
Andrei Canta
parent
ee5dd3abd7
commit
881ba95664
3 changed files with 262 additions and 43 deletions
|
|
@ -5,6 +5,8 @@ import {
|
|||
Container,
|
||||
Flex,
|
||||
MediaQuery,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Textarea,
|
||||
|
|
@ -17,7 +19,12 @@ import { AiOutlineSend } from "react-icons/ai";
|
|||
import { MessageItem } from "../components/MessageItem";
|
||||
import { db } from "../db";
|
||||
import { useChatId } from "../hooks/useChatId";
|
||||
import { characters } from "../utils/characters";
|
||||
import {
|
||||
writingCharacters,
|
||||
writingFormats,
|
||||
writingStyles,
|
||||
writingTones,
|
||||
} from "../utils/constants";
|
||||
import { createChatCompletion } from "../utils/openai";
|
||||
|
||||
export function ChatRoute() {
|
||||
|
|
@ -37,7 +44,23 @@ export function ChatRoute() {
|
|||
return db.chats.get(chatId);
|
||||
}, [chatId]);
|
||||
|
||||
const [character, setCharacter] = useState(0);
|
||||
const [writingCharacter, setWritingCharacter] = useState<string | null>(null);
|
||||
const [writingTone, setWritingTone] = useState<string | null>(null);
|
||||
const [writingStyle, setWritingStyle] = useState<string | null>(null);
|
||||
const [writingFormat, setWritingFormat] = useState<string | null>(null);
|
||||
|
||||
const getSystemMessage = () => {
|
||||
const message: string[] = [];
|
||||
if (writingCharacter) message.push(`You are ${writingCharacter}.`);
|
||||
if (writingTone) message.push(`Respond in ${writingTone} tone.`);
|
||||
if (writingStyle) message.push(`Respond in ${writingStyle} style.`);
|
||||
if (writingFormat) message.push(writingFormat);
|
||||
if (message.length === 0)
|
||||
message.push(
|
||||
"You are ChatGPT, a large language model trained by OpenAI."
|
||||
);
|
||||
return message.join(" ");
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (submitting) return;
|
||||
|
|
@ -75,7 +98,7 @@ export function ChatRoute() {
|
|||
const result = await createChatCompletion(apiKey, [
|
||||
{
|
||||
role: "system",
|
||||
content: `You are a ${characters[character].name}.${characters[character].description}`,
|
||||
content: getSystemMessage(),
|
||||
},
|
||||
...(messages ?? []).map((message) => ({
|
||||
role: message.role,
|
||||
|
|
@ -111,7 +134,7 @@ export function ChatRoute() {
|
|||
const createChatDscription = await createChatCompletion(apiKey, [
|
||||
{
|
||||
role: "system",
|
||||
content: `You are a ${characters[character].name}.${characters[character].description}`,
|
||||
content: getSystemMessage(),
|
||||
},
|
||||
...(messages ?? []).map((message) => ({
|
||||
role: message.role,
|
||||
|
|
@ -194,10 +217,61 @@ export function ChatRoute() {
|
|||
})}
|
||||
>
|
||||
<Container>
|
||||
{messages?.length === 0 && (
|
||||
<SimpleGrid
|
||||
mb="sm"
|
||||
spacing="xs"
|
||||
breakpoints={[
|
||||
{ minWidth: "sm", cols: 4 },
|
||||
{ maxWidth: "sm", cols: 2 },
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
value={writingCharacter}
|
||||
onChange={setWritingCharacter}
|
||||
data={writingCharacters}
|
||||
placeholder="Character"
|
||||
variant="filled"
|
||||
searchable
|
||||
clearable
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
value={writingTone}
|
||||
onChange={setWritingTone}
|
||||
data={writingTones}
|
||||
placeholder="Tone"
|
||||
variant="filled"
|
||||
searchable
|
||||
clearable
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
value={writingStyle}
|
||||
onChange={setWritingStyle}
|
||||
data={writingStyles}
|
||||
placeholder="Style"
|
||||
variant="filled"
|
||||
searchable
|
||||
clearable
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
value={writingFormat}
|
||||
onChange={setWritingFormat}
|
||||
data={writingFormats}
|
||||
placeholder="Format"
|
||||
variant="filled"
|
||||
searchable
|
||||
clearable
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
)}
|
||||
<Flex gap="sm">
|
||||
<Textarea
|
||||
key={chatId}
|
||||
style={{ flex: 1 }}
|
||||
sx={{ flex: 1 }}
|
||||
placeholder="Your message here..."
|
||||
autosize
|
||||
autoFocus
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
export const characters = [
|
||||
{
|
||||
name: "ChatGPT",
|
||||
description: "You are ChatGPT, a large language model trained by OpenAI.",
|
||||
},
|
||||
{
|
||||
name: "Standup Comedian",
|
||||
description: "A standup comedian who can make you laugh with their jokes and humor.",
|
||||
},
|
||||
{
|
||||
name: "Life Coach",
|
||||
description: "A life coach who can help you set and achieve personal and professional goals.",
|
||||
},
|
||||
{
|
||||
name: "Career Counselor",
|
||||
description: "A career counselor who can help you with anything related to your career, from job searching to career planning.",
|
||||
},
|
||||
{
|
||||
name: "Nutritionist",
|
||||
description: "A nutritionist who can help you with your dietary needs by providing recipes, advice on healthy eating habits, and dietary recommendations.",
|
||||
},
|
||||
{
|
||||
name: "Product Manager",
|
||||
description: "A product manager who can oversee the development and marketing of a product, identify customer needs, and work with engineers and designers to create a product roadmap.",
|
||||
},
|
||||
{
|
||||
name: "Personal Trainer",
|
||||
description: "A personal trainer who can help you stay fit and improve your health by creating personalized fitness plans and providing workout routines.",
|
||||
},
|
||||
{
|
||||
name: "Life Hacker",
|
||||
description: "A life hacker who can provide useful tips and tricks to help you optimize your daily routines, save time, and increase productivity.",
|
||||
},
|
||||
{
|
||||
name: "Travel Advisor",
|
||||
description: "A travel advisor who can suggest travel destinations, provide recommendations on transportation and accommodations, and help you plan your itinerary based on your preferences and budget.",
|
||||
},
|
||||
]
|
||||
183
src/utils/constants.ts
Normal file
183
src/utils/constants.ts
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
export const writingCharacters = [
|
||||
{
|
||||
label: "Standup Comedian",
|
||||
value:
|
||||
"A performer who entertains audiences by telling jokes and humorous stories.",
|
||||
},
|
||||
{
|
||||
label: "Life Coach",
|
||||
value:
|
||||
"A professional who helps individuals identify and achieve their personal and professional goals.",
|
||||
},
|
||||
{
|
||||
label: "Career Counselor",
|
||||
value:
|
||||
"A professional who helps individuals explore and choose careers, develop job search strategies, and improve job performance.",
|
||||
},
|
||||
{
|
||||
label: "Nutritionist",
|
||||
value:
|
||||
"A health professional who specializes in the study of nutrition and its effects on the body.",
|
||||
},
|
||||
{
|
||||
label: "Product Manager",
|
||||
value:
|
||||
"A professional who oversees the development and marketing of a company's products.",
|
||||
},
|
||||
{
|
||||
label: "Personal Trainer",
|
||||
value:
|
||||
"A fitness professional who works with individuals to develop personalized exercise programs and improve their overall health and fitness.",
|
||||
},
|
||||
{
|
||||
label: "Life Hacker",
|
||||
value:
|
||||
"A person who uses unconventional methods to solve problems and increase productivity in everyday life.",
|
||||
},
|
||||
{
|
||||
label: "Travel Advisor",
|
||||
value:
|
||||
"A professional who helps individuals plan and book travel arrangements.",
|
||||
},
|
||||
{
|
||||
label: "Mindfulness Coach",
|
||||
value:
|
||||
"A professional who helps individuals develop mindfulness practices to reduce stress and improve well-being.",
|
||||
},
|
||||
{
|
||||
label: "Financial Advisor",
|
||||
value:
|
||||
"A professional who provides guidance and advice on financial planning, investment strategies, and retirement planning.",
|
||||
},
|
||||
{
|
||||
label: "Language Tutor",
|
||||
value:
|
||||
"A teacher who helps individuals learn and improve their language skills.",
|
||||
},
|
||||
{
|
||||
label: "Travel Guide",
|
||||
value:
|
||||
"A professional who leads tours and provides information about local attractions and culture.",
|
||||
},
|
||||
{
|
||||
label: "Marketing Expert",
|
||||
value:
|
||||
"A professional who develops and implements marketing strategies to promote products and services.",
|
||||
},
|
||||
{
|
||||
label: "Software Developer",
|
||||
value:
|
||||
"A professional who designs, develops, and maintains software applications and systems.",
|
||||
},
|
||||
{
|
||||
label: "Dating Coach",
|
||||
value:
|
||||
"A professional who helps individuals improve their dating and relationship skills.",
|
||||
},
|
||||
{
|
||||
label: "DIY Expert",
|
||||
value:
|
||||
"A person who is skilled at completing a wide range of do-it-yourself projects around the home.",
|
||||
},
|
||||
{
|
||||
label: "Journalist",
|
||||
value:
|
||||
"A professional who investigates and reports on current events and news stories.",
|
||||
},
|
||||
{
|
||||
label: "Tech Writer",
|
||||
value:
|
||||
"A professional who writes about technology and related topics for a variety of audiences.",
|
||||
},
|
||||
{
|
||||
label: "Professional Chef",
|
||||
value:
|
||||
"A skilled culinary professional who prepares meals and manages kitchen operations.",
|
||||
},
|
||||
{
|
||||
label: "Professional Salesperson",
|
||||
value:
|
||||
"A professional who sells products and services to businesses and consumers.",
|
||||
},
|
||||
{
|
||||
label: "Startup Tech Lawyer",
|
||||
value:
|
||||
"A legal professional who specializes in providing legal advice and services to startup technology companies.",
|
||||
},
|
||||
{
|
||||
label: "Graphic Designer",
|
||||
value:
|
||||
"A professional who designs visual materials such as logos, brochures, and websites.",
|
||||
},
|
||||
{
|
||||
label: "Academic Researcher",
|
||||
value:
|
||||
"A professional who conducts research and produces scholarly work in a particular academic field.",
|
||||
},
|
||||
{
|
||||
label: "Customer Support Agent",
|
||||
value:
|
||||
"A professional who provides assistance and support to customers who have questions or problems with a company's products or services.",
|
||||
},
|
||||
{
|
||||
label: "HR Consultant",
|
||||
value:
|
||||
"A professional who provides guidance and advice to organizations on human resource management and strategy",
|
||||
},
|
||||
];
|
||||
|
||||
export const writingTones = [
|
||||
"Assertive",
|
||||
"Authoritative",
|
||||
"Casual",
|
||||
"Confident",
|
||||
"Condescending",
|
||||
"Conversational",
|
||||
"Diplomatic",
|
||||
"Direct",
|
||||
"Eloquent",
|
||||
"Formal",
|
||||
"Friendly",
|
||||
"Humorous",
|
||||
"Informative",
|
||||
"Inspiring",
|
||||
"Intense",
|
||||
"Irritable",
|
||||
"Joking",
|
||||
"Polite",
|
||||
"Sarcastic",
|
||||
"Sincere",
|
||||
"Soothing",
|
||||
"Stern",
|
||||
"Sympathetic",
|
||||
"Tactful",
|
||||
"Witty",
|
||||
];
|
||||
|
||||
export const writingStyles = [
|
||||
"Academic",
|
||||
"Analytical",
|
||||
"Argumentative",
|
||||
"Conversational",
|
||||
"Creative",
|
||||
"Critical",
|
||||
"Descriptive",
|
||||
"Explanatory",
|
||||
"Informative",
|
||||
"Instructive",
|
||||
"Investigative",
|
||||
"Journalistic",
|
||||
"Metaphorical",
|
||||
"Narrative",
|
||||
"Persuasive",
|
||||
"Poetic",
|
||||
"Satirical",
|
||||
"Technical",
|
||||
];
|
||||
|
||||
export const writingFormats = [
|
||||
{ value: "Answer as concise as possible", label: "Concise" },
|
||||
{ value: "Think step-by-step", label: "Step-by-step" },
|
||||
{ value: "Answer in painstakingly detail", label: "Extreme Detail" },
|
||||
{ value: "Explain like I'm five", label: "Explain Like I'm Five" },
|
||||
];
|
||||
Loading…
Reference in a new issue