diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 8d7c0cb..df74119 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useMemo, useRef, useState } from 'react' +import professeurTopImage from './assets/professeur-top.png' const API_BASE = '/api' const AUTO_STOP_SILENCE_MS = 2500 @@ -37,15 +38,13 @@ function Avatar({ speaking }) { return (
-
-
- - -
-
-
+ Professeur TOP
-
ProfAmi
+
Professeur TOP
) } @@ -646,7 +645,7 @@ export default function App() { {messages.length === 0 &&

Le dialogue apparaîtra ici.

} {messages.map((message) => (
- {message.role === 'assistant' ? 'ProfAmi' : 'Élève'} + {message.role === 'assistant' ? 'Professeur TOP' : 'Élève'}

{message.content}

))} diff --git a/frontend/src/assets/professeur-top.png b/frontend/src/assets/professeur-top.png new file mode 100644 index 0000000..f2706bf Binary files /dev/null and b/frontend/src/assets/professeur-top.png differ diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 966e72b..56f0a4d 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -96,37 +96,17 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } .avatar { width: 144px; height: 144px; - border-radius: 50%; - background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b); - display: grid; - place-items: center; + border-radius: 28px; + overflow: hidden; + background: white; box-shadow: 0 10px 20px rgba(245, 158, 11, 0.28); } .avatar.speaking { animation: pulse 0.7s infinite alternate; } -.face { width: 90px; } -.eyes { - display: flex; - justify-content: space-between; - margin-bottom: 1.2rem; -} -.eyes span { - width: 14px; - height: 14px; - background: #1f2937; - border-radius: 50%; -} -.mouth { - width: 44px; - height: 10px; - background: #7c2d12; - border-radius: 999px; - margin: 0 auto; - transition: all 0.15s ease; -} -.mouth-speaking { - width: 34px; - height: 24px; - border-radius: 0 0 999px 999px; +.avatar-image { + width: 100%; + height: 100%; + object-fit: cover; + display: block; } .avatar-caption { font-weight: 700; }