Set border radius (#84)

Co-authored-by: Freddy Boulton <freddyboulton@hf-freddy.local>

frontend/Index.svelte

@@ -38,6 +38,7 @@
 	export let icon: string | undefined = undefined;
 	export let icon_button_color: string = "var(--color-accent)";
 	export let pulse_color: string = "var(--color-accent)";
+	export let icon_radius: number = 50;
 
 	const on_change_cb = (msg: "change" | "tick" | any) => {
 		if (
@@ -124,6 +125,7 @@
 			{icon}
 			{icon_button_color}
 			{pulse_color}
+			{icon_radius}
 			i18n={gradio.i18n}
 			on:tick={() => gradio.dispatch("tick")}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
@@ -178,6 +180,7 @@
 			{icon}
 			{reject_cb}
 			{icon_button_color}
+			{icon_radius}
 			{pulse_color}
 			{button_labels}
 			on:tick={() => gradio.dispatch("tick")}

frontend/shared/AudioWave.svelte

@@ -11,6 +11,7 @@
   export let icon_button_color: string = "var(--color-accent)";
   export let pulse_color: string = "var(--color-accent)";
   export let pending: boolean = false;
+  export let icon_radius: number = 50;
 
   let audioContext: AudioContext;
   let analyser: AnalyserNode;
@@ -34,6 +35,7 @@
   });
 
   function setupAudioContext() {
+    // @ts-ignore
     audioContext = new (window.AudioContext || window.webkitAudioContext)();
     analyser = audioContext.createAnalyser();
     const source = audioContext.createMediaStreamSource(
@@ -58,6 +60,7 @@
     );
     for (let i = 0; i < bars.length; i++) {
       const barHeight = (dataArray[i] / 255) * 2;
+      // @ts-ignore
       bars[i].style.transform = `scaleY(${Math.max(0.1, barHeight)})`;
     }
 
@@ -78,6 +81,7 @@
           {pulse_color}
           {icon}
           {icon_button_color}
+          {icon_radius}
           {audio_source_callback}
         />
       </div>

frontend/shared/InteractiveAudio.svelte

@@ -33,6 +33,7 @@
     export let icon: string | undefined = undefined;
     export let icon_button_color: string = "var(--color-accent)";
     export let pulse_color: string = "var(--color-accent)";
+    export let icon_radius: number = 50;
     export let button_labels: { start: string; stop: string; waiting: string };
     let pending = false;
 
@@ -291,6 +292,7 @@
             {icon_button_color}
             {pulse_color}
             {pending}
+            {icon_radius}
         />
         <StreamingBar time_limit={_time_limit} />
         <div class="button-wrap" class:pulse={stopword_recognized}>

frontend/shared/InteractiveVideo.svelte

@@ -63,6 +63,7 @@
 		{icon_button_color}
 		{pulse_color}
 		{button_labels}
+		{icon_radius}
 		on:error
 		on:start_recording
 		on:stop_recording

frontend/shared/PulsingIcon.svelte

@@ -7,6 +7,7 @@
   export let icon: string | ComponentType = undefined;
   export let icon_button_color: string = "var(--color-accent)";
   export let pulse_color: string = "var(--color-accent)";
+  export let icon_radius: number = 50;
 
   let audioContext: AudioContext;
   let analyser: AnalyserNode;
@@ -27,6 +28,7 @@
   });
 
   function setupAudioContext() {
+    // @ts-ignore
     audioContext = new (window.AudioContext || window.webkitAudioContext)();
     analyser = audioContext.createAnalyser();
     const source = audioContext.createMediaStreamSource(
@@ -77,7 +79,12 @@
       style:background={icon_button_color}
     >
       {#if typeof icon === "string"}
-        <img src={icon} alt="Audio visualization icon" class="icon-image" />
+        <img
+          src={icon}
+          alt="Audio visualization icon"
+          class="icon-image"
+          style:border-radius={`${icon_radius}%`}
+        />
       {:else if icon === undefined}
         <div></div>
       {:else}
@@ -123,7 +130,6 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
-    border-radius: 50%;
   }
 
   .pulse-ring {

frontend/shared/StaticAudio.svelte

@@ -18,6 +18,7 @@
     export let icon: string | undefined = undefined;
     export let icon_button_color: string = "var(--color-accent)";
     export let pulse_color: string = "var(--color-accent)";
+    export let icon_radius: number = 50;
 
     export let server: {
         offer: (body: any) => Promise<any>;
@@ -65,6 +66,7 @@
             });
             let stream = null;
             const timeoutId = setTimeout(() => {
+                // @ts-ignore
                 on_change_cb({ type: "connection_timeout" });
             }, 5000);
 
@@ -120,6 +122,7 @@
             {icon}
             {icon_button_color}
             {pulse_color}
+            {icon_radius}
         />
     </div>
 {/if}