externalize hardcoded UI strings, add Hebrew translation and RTL support

WebUI/src/App.vue

@@ -165,7 +165,7 @@
     <SideModalAppSettings :isVisible="showAppSettings" @close="showAppSettings = false" />
 
     <div class="flex-1 flex flex-col relative justify-center min-h-0">
-      <div class="fixed top-18 left-4 z-5">
+      <div class="fixed top-18 start-4 z-5">
         <button
           id="show-history-button"
           v-show="!uiStore.showHistory"
@@ -176,7 +176,7 @@
         </button>
       </div>
       <div
-        class="fixed left-4 z-5 flex items-center gap-3"
+        class="fixed start-4 z-5 flex items-center gap-3"
         :class="{
           'bottom-4': !footerExpanded,
           'bottom-27': footerExpanded,
@@ -186,14 +186,14 @@
           <button
             @click="openAppSettings"
             class="svg-icon i-setup w-6 h-6 text-foreground hover:text-foreground/80 transition-colors"
-            title="App Settings"
+            :title="languages.COM_APP_SETTINGS"
           ></button>
         </div>
         <DemoModeBlocker>
           <button
             @click="openDevTools"
             class="svg-icon i-code w-6 h-6 text-foreground hover:text-foreground/80 transition-colors"
-            title="Developer Tools"
+            :title="languages.COM_DEVELOPER_TOOLS"
           ></button>
         </DemoModeBlocker>
       </div>
@@ -210,12 +210,12 @@
       />
       <WorkflowResult v-if="promptStore.getCurrentMode() === 'video'" ref="videoRef" mode="video" />
       <PromptArea @auto-hide-footer="handleAutoHideFooter" @open-settings="openSpecificSettings" />
-      <div v-if="!footerExpanded" class="fixed bottom-4 right-4 z-5 flex items-center gap-3">
+      <div v-if="!footerExpanded" class="fixed bottom-4 end-4 z-5 flex items-center gap-3">
         <button
           @click="footerExpanded = !footerExpanded"
           class="text-foreground/30 hover:text-foreground/80 text-xs uppercase tracking-wider transition-colors"
         >
-          SHOW FOOTER
+          {{ languages.COM_SHOW_FOOTER }}
         </button>
       </div>
     </div>
@@ -254,35 +254,39 @@
         @click="footerExpanded = !footerExpanded"
         class="text-foreground/30 hover:text-foreground/80 text-xs uppercase tracking-wider transition-colors"
       >
-        HIDE FOOTER
+        {{ languages.COM_HIDE_FOOTER }}
       </button>
     </div>
     <div v-show="footerExpanded" class="w-full flex justify-between items-center pb-2">
       <div>
         <p>
-          Al Playground from Intel Corporation
+          AI Playground from Intel Corporation
           <a href="https://github.com/intel/ai-playground" target="_blank" class="text-primary"
             >https://github.com/intel/ai-playground</a
           >
         </p>
         <p>
-          AI Playground version: v{{ productVersion }}
-          <a :href="userGuideUrl" target="_blank" class="text-primary"> User Guide</a>
+          {{ languages.APP_VERSION_LABEL }} v{{ productVersion }}
+          <a :href="userGuideUrl" target="_blank" class="text-primary">
+            {{ languages.APP_USER_GUIDE }}</a
+          >
 
           <a :href="noticesUrl" target="_blank" class="text-primary">
-            | Important Notices and Disclaimers</a
+            | {{ languages.APP_NOTICES }}</a
           >
 
-          <a :href="licenseUrl" target="_blank" class="text-primary"> | Licenses</a>
+          <a :href="licenseUrl" target="_blank" class="text-primary">
+            | {{ languages.APP_LICENSES }}</a
+          >
         </p>
       </div>
       <div v-if="theme.active === 'lnl'" class="flex gap-2 items-center">
-        <p class="text-muted-foreground text-lg mr-2">Powered by</p>
+        <p class="text-muted-foreground text-lg me-2">{{ languages.COM_POWERED_BY }}</p>
         <img class="size-20" src="@/assets/image/core_ultra_badge.png" />
         <img class="size-20" src="@/assets/image/arc_graphics_badge.png" />
       </div>
       <div v-if="theme.active === 'bmg'" class="flex gap-2 items-center">
-        <p class="text-muted-foreground text-lg mr-2">Powered by</p>
+        <p class="text-muted-foreground text-lg me-2">{{ languages.COM_POWERED_BY }}</p>
         <img class="size-20" src="@/assets/image/arc_graphics_badge.png" />
       </div>
       <img v-if="theme.active === 'light'" class="h-8" src="@/assets/svg/intel-dark.svg" />

WebUI/src/assets/css/compontents.css

@@ -26,11 +26,11 @@
     }
 
     > .v-slide-min {
-      padding-right: 12px;
+      padding-inline-end: 12px;
     }
 
     > .v-slide-max {
-      padding-left: 12px;
+      padding-inline-start: 12px;
     }
 
     > .v-slide-position {
@@ -62,7 +62,7 @@
       background: url('@/assets/svg/slide-bar.svg');
       width: 13px;
       height: 13px;
-      transition: left ease 0.1s;
+      transition: inset-inline-start ease 0.1s;
       display: flex;
       justify-items: center;
       align-items: center;
@@ -189,11 +189,11 @@
 }
 @keyframes loading-move {
   from {
-    left: -10%;
+    inset-inline-start: -10%;
   }
 
   to {
-    left: 90%;
+    inset-inline-start: 90%;
   }
 }
 
@@ -302,11 +302,11 @@
     }
 
     > .v-slide-min {
-      padding-right: 12px;
+      padding-inline-end: 12px;
     }
 
     > .v-slide-max {
-      padding-left: 12px;
+      padding-inline-start: 12px;
     }
 
     > .v-slide-position {

WebUI/src/assets/css/main.css

@@ -73,7 +73,7 @@ textarea {
         background: url('@/assets/svg/tab-active-first.svg') 0px 0px no-repeat;
 
         > * {
-          margin-left: -15px;
+          margin-inline-start: -15px;
         }
       }
     }
@@ -130,11 +130,11 @@ textarea {
     height: 100%;
     &::after {
       position: absolute;
-      right: -25px;
+      inset-inline-end: -25px;
       top: 0px;
       height: 100%;
       content: '';
-      border-right: 1px solid hsl(var(--border));
+      border-inline-end: 1px solid hsl(var(--border));
     }
   }
 }
@@ -205,7 +205,7 @@ textarea {
     position: absolute;
     user-select: none;
     top: 0px;
-    left: 0px;
+    inset-inline-start: 0px;
     border-radius: 4px;
     font-size: 12px;
     background-color: rgba(255, 255, 255, 0.72);
@@ -301,15 +301,15 @@ textarea {
   border: 1px solid hsl(var(--border));
   overflow: hidden;
   position: fixed;
-  left: 50%;
+  inset-inline-start: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 30;
 }
 
 .modify-mask {
   position: absolute;
-  left: 0px;
+  inset-inline-start: 0px;
   top: 0px;
   display: flex;
   justify-content: center;
@@ -356,7 +356,7 @@ textarea {
         content: ' ';
         position: absolute;
         width: 100%;
-        left: 0px;
+        inset-inline-start: 0px;
         bottom: -15px;
         border-bottom: 1px solid #fff;
       }