add the image

css/options.css

@@ -132,7 +132,7 @@ code { background: #ececec; padding: 5px 8px; border-radius: 3px; }
   display: block;
   cursor: pointer;
   max-width: 400px;
-  height: 40px;
+  /* height: 40px; */
   padding: 5px;
   margin: 0 0 20px 0; // Increase the bottom margin to account for the space of the image
   border-radius: 3px;
@@ -156,7 +156,12 @@ code { background: #ececec; padding: 5px 8px; border-radius: 3px; }
 
 /* Add CSS styles for the image */
 .s-label img {
-  display: block;
-  margin-top: 10px;
+  display: inline-block; /* Change display to inline-block */
+  margin: 0 10px; /* Add horizontal margin */
+  vertical-align: middle; /* Align it vertically in the middle */
   object-fit: cover;
+}
+
+.s-label .mdc-radio {
+  display: inline-block; /* Make radio buttons inline elements */
 }

options/options.js

@@ -38,12 +38,12 @@ chrome.runtime.onMessage.addListener((request) => {
 var state = {
   shortcut: {},
   api: [
-    {id: 'gpt', title: 'GPT (For in-depth translation)', image: null},
-    {id: 'deepl', title: 'DeepL (For quick translation)', image: null}
+    {id: 'gpt', title: 'GPT (For in-depth translation)'},
+    {id: 'deepl', title: 'DeepL (For quick translation)'}
   ],
   capture_mode: [
     {id: 'single', title: 'Capture a single text bubble (for stability)'},
-    {id: 'multiple', title: 'Capture multiple text bubbles (for convenience)'},
+    {id: 'multiple', title: 'Capture multiple text bubbles (for convenience)', image: './icons/multiple_instructions.jpg'},
     {id: 'screen', title: 'Capture the entire screen'}
   ],
   pronunciation: [
@@ -144,11 +144,6 @@ m.mount(document.querySelector('main'), {
             ),
           ),
           m('span', item.title),
-          // Conditionally render an image only when an image source is provided
-          item.image && m('img', {
-            src: item.image,
-            style: {width: '100px', height: '100px'} // Set a fixed size for the image
-          })
         )
       )
     ),
@@ -168,7 +163,12 @@ m.mount(document.querySelector('main'), {
               m('.mdc-radio__inner-circle'),
             ),
           ),
-          m('span', item.title)
+          m('span', item.title),
+          // Conditionally render an image only when an image source is provided
+          item.image && m('img', {
+            src: item.image,
+            style: {width: '550px'} // Set a fixed size for the image
+          })
         )
       )
     ),