Lots of changes

Dockerfile

@@ -172,6 +172,9 @@ RUN pip install yfinance pyzt geopy
 # Install packages needed for vector operations
 RUN pip install umap-learn
 
+# Needed for random name generation
+RUN pip install names-dataset
+
 FROM llm-base AS backstory
 
 #COPY /src/requirements.txt /opt/backstory/src/requirements.txt

frontend/src/NewApp/Components/CandidateInfo.tsx

@@ -130,15 +130,15 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
 
                     <Divider sx={{ my: 2 }} />
                     
-                    <Typography variant="body2" sx={{ mb: 1 }}>
+                    { candidate.location && <Typography variant="body2" sx={{ mb: 1 }}>
                       <strong>Location:</strong> {candidate.location}
-                    </Typography>
+                    </Typography> }
-                    <Typography variant="body2" sx={{ mb: 1 }}>
+                    { candidate.email && <Typography variant="body2" sx={{ mb: 1 }}>
                       <strong>Email:</strong> {candidate.email}
-                    </Typography>
+                    </Typography> }
-                    <Typography variant="body2">
+                    { candidate.phone && <Typography variant="body2">
                       <strong>Phone:</strong> {candidate.phone}
-                    </Typography>
+                    </Typography> }
             </Grid>
 
         </Grid>

frontend/src/NewApp/Components/Quote.tsx

@@ -0,0 +1,116 @@
+  
+  
+  
+  
+import React from 'react';
+import { Box, Typography, Paper } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const QuoteContainer = styled(Paper)(({ theme }) => ({
+  position: 'relative',
+  padding: theme.spacing(4),
+  margin: theme.spacing(2),
+  background: 'linear-gradient(135deg, #FFFFFF 0%, #D3CDBF 100%)', // White to Warm Gray
+  borderRadius: theme.spacing(2),
+  boxShadow: '0 8px 32px rgba(26, 37, 54, 0.15)', // Midnight Blue shadow
+  overflow: 'hidden',
+  border: '1px solid rgba(74, 122, 125, 0.2)', // Subtle Dusty Teal border
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '4px',
+    background: 'linear-gradient(90deg, #4A7A7D 0%, #D4A017 100%)', // Dusty Teal to Golden Ochre
+  }
+}));
+
+const QuoteText = styled(Typography)(({ theme }) => ({
+  fontSize: '1.2rem',
+  lineHeight: 1.6,
+  fontStyle: 'italic',
+  color: '#2E2E2E', // Charcoal Black
+  position: 'relative',
+  zIndex: 2,
+  textAlign: 'center',
+  fontFamily: '"Georgia", "Times New Roman", serif',
+  fontWeight: 400,
+}));
+
+const QuoteMark = styled(Typography)(({ theme }) => ({
+  fontSize: '4rem',
+  fontFamily: '"Georgia", "Times New Roman", serif',
+  fontWeight: 'bold',
+  opacity: 0.15,
+  position: 'absolute',
+  zIndex: 1,
+  color: '#4A7A7D', // Dusty Teal
+  userSelect: 'none',
+}));
+
+const OpeningQuote = styled(QuoteMark)({
+  top: '10px',
+  left: '15px',
+});
+
+const ClosingQuote = styled(QuoteMark)({
+  bottom: '10px',
+  right: '15px',
+  transform: 'rotate(180deg)',
+});
+
+const AuthorText = styled(Typography)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  textAlign: 'right',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  color: '#1A2536', // Midnight Blue
+  fontSize: '0.95rem',
+  '&::before': {
+    content: '"— "',
+    color: '#D4A017', // Golden Ochre dash
+  }
+}));
+
+const AccentLine = styled(Box)({
+  width: '60px',
+  height: '2px',
+  background: 'linear-gradient(90deg, #D4A017 0%, #4A7A7D 100%)', // Golden Ochre to Dusty Teal
+  margin: '1rem auto',
+  borderRadius: '1px',
+});
+
+
+interface QuoteProps {
+  quote?: string,
+  author?: string
+};
+
+const Quote = (props : QuoteProps) => {
+  const { quote, author } = props;
+  return (
+    <QuoteContainer elevation={0}>
+      <OpeningQuote>"</OpeningQuote>
+      <ClosingQuote>"</ClosingQuote>
+      
+      <Box sx={{ position: 'relative', zIndex: 2 }}>
+        <QuoteText variant="body1">
+          {quote}
+        </QuoteText>
+        
+        <AccentLine />
+        
+        {author && (
+          <AuthorText variant="body2">
+            {author}
+          </AuthorText>
+        )}
+      </Box>
+    </QuoteContainer>
+  );
+};
+
+export {
+  Quote
+};

frontend/src/NewApp/Pages/GenerateCandidate.tsx

@@ -62,6 +62,7 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
         }
         setPrompt(query.prompt);
         setState(0);
+        setStatus("Generating persona...");
         setUser(emptyUser);
         setStreaming('');
         setResume('');
@@ -170,7 +171,7 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
             }
 
             const imagePrompt = `A photorealistic profile picture of a ${user?.age} year old ${user?.gender?.toLocaleLowerCase()} ${user?.ethnicity?.toLocaleLowerCase()} person. ${prompt}`
-            setStatus('Staring image generation...');
+            setStatus('Starting image generation...');
             setProcessing(true);
             setCanGenImage(false);
             setState(3);
@@ -279,10 +280,7 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
           sx={{flexShrink: 1}}/>
         }
         { prompt && 
-          <Box sx={{ display: "flex", flexDirection: "column"}}>
+          <Quote quote={prompt}/>
-            <Box sx={{ fontSize: "0.5rem"}}>Persona prompt</Box>
-            <Quote quote={prompt}/>
-            </Box>
         }
         {processing && 
           <Box sx={{

src/utils/profile_image.py

@@ -238,7 +238,7 @@ async def generate_image(message: Message, request: ImageRequest) -> AsyncGenera
         model_type = "flux"
         device = "cpu"
 
-        yield status(message, f"Starting image generation for prompt: {prompt} {request.width}x{request.height} as {filename} using {device}")
+        yield status(message, f"Starting image generation...")
 
         # Get initial time estimate, scaled by resolution
         estimates = TIME_ESTIMATES[model_type][device]