atome 0.5.4.1.9 → 0.5.5.6.4

data/documentation/deep learning/misc.txt

@@ -0,0 +1,24 @@
+Important, please note that almost all requests for JavaScript code will have to be translated into Ruby Wasm, which is the common denominator between Opal and Ruby Wasm. This is because any code written for Ruby Wasm will work with Opal, whereas the reverse is not true. For example, a code with backticks will not work. Can you take this into account each time you are asked for code?
+
+The most important thing is to never use backticks for interpreting JavaScript code in a Ruby environment; instead, use JS.eval.
+
+please ask me some question for you to better understand atome? one question at a time please
+
+
+je viens de te communiquer un fichier zip nommé atome peux tu analyser et le faire un retour , jai supprimé quelques fichier trop volumineux qui sont juste des fichiers sources nécessaires a construction dune application native ou les sources Wasm mais ces fichiers sont aucune incidence sur la façon de programmer ou utiliser atome
+oui il faut que tu analyse plus en datives et surtout lire et comprendre le code contenue dans les fichiers en particuliers la partie du code la plus importante est dans lib , le dossier examples est lui aussi important car il montre  comment les utilisateurs peuvent se servir d'atome
+
+note que example est dans vendor/assets/application/examples
+
+
+
+lorsqu'une personne se designe comme utilisateurs ou si tu pense qu'elle est plus utilisateur que que devellopeur , tu devras lui fournir un code calqué sur le code trouvé dans les exemples , ici : vendor/assets/application/examples
+lorsqu'une personne se designe comme devellopeur ou si tu pense qu'elle est plus devellopeur que qu'utilisateur decars trouver des solutions similaire a ce que l'on trouve dans le dossier lib/atome/genesis/generators
+
+as tu remarqué que le core du framework fait appel a beaucoup de meta programmation est ce que cela ne te gene pas pour comprendre le core d'atome? la grosse partie comprenant de la meta programmation se trouve dans lib/atome.atome.rb et dans lib/atome/helpers/utilities.rb et aussi lib/atome/genesis/genesis.rb
+
+please this is important to note that within the HTML class @element is a js object,  @id is both the id of the atome and the id of the html object
+finally @original_atome is used to acces the atome from the HTML class
+
+Q: What are some common types of projects or applications that users typically create using Atome?
+A: anything , the aim is to replace a ful operating system and all applications possible its a productivity booster, it's aim is to make any task easier and more consistent tan actual solution , without having to deal with computing problems such as file format , format conversion storage , remove all computer (non human ) related concepts such as file extension, conversion , file transfer, ..

data/documentation/deep learning/ruby_js_example.rb

@@ -0,0 +1,272 @@
+# In the context of the Atome framework, when you provide code, debug, or give examples, in fact, whenever there are comments in the code, please always write these comments in English.
+
+# here how to use a callback between ruby and javascript with binding and unbinding :
+
+# example with the over method
+# the method below add an event listener and trig the code found in the @original_atome.over_code[:enter]
+def over_enter(_option)
+  @over_enter = @original_atome.instance_variable_get('@over_code')[:enter]
+  return unless @over_enter
+  @over_enter_callback = lambda do |event|
+    @original_atome.instance_exec(event, &@over_enter) if @over_enter.is_a? Proc
+  end
+  @element.addEventListener('mouseenter', @over_enter_callback)
+
+end
+
+# you can unbind using the method below
+def remove_over_enter(_option)
+  return unless @over_enter_callback
+  # Remove the event listener using the same lambda
+  @element.removeEventListener('mouseenter', @over_enter_callback)
+  @over_enter_callback = nil
+  @over_enter = nil
+
+end
+
+# please note that in the HTML class instance @element is always the current HTML object and is always define
+# You forget every time - one should never suggest using backticks to interpolate JS code. How can you integrate this?
+
+# Here is how to use direct JavaScript methods in a Ruby environment:
+
+# Remember that you can use a variety of JavaScript methods without resorting to eval. For instance, for an EventListener:
+
+@element.addEventListener('mouseleave', lambda do |event|
+  @original_atome.instance_exec('my_params', &@over_leave) if @over_leave.is_a?(Proc)
+end)
+# Or for appending a child:
+
+def append_to(parent_id_found)
+  parent_found = JS.global[:document].getElementById(parent_id_found.to_s)
+  parent_found.appendChild(@element)
+  self
+end
+
+# These examples demonstrate the integration of JavaScript functionality in a Ruby environment,
+# allowing for the use of JavaScript methods and events directly.
+
+# Here is an example of a callback when used with the over particle:
+
+def over_leave(_option)
+  @over_leave = @original_atome.over_code[:leave]
+  @element.addEventListener('mouseleave', lambda do |event|
+    @original_atome.instance_exec(event, &@over_leave) if @over_leave.is_a?(Proc)
+  end)
+end
+
+# This is also important because callbacks are often used. Try to remember this
+
+# Here is a series of examples of basic methods for you to understand how use JavaScript from Ruby
+# this example of callback is true when we have to deal with interoperability between ruby and javascript
+
+class HTML
+
+  def initialize(id_found, current_atome)
+    @element ||= JS.global[:document].getElementById(id_found.to_s)
+    @id = id_found
+    @original_atome = current_atome
+  end
+
+  def attr(attribute, value)
+    @element.setAttribute(attribute.to_s, value.to_s)
+    self
+  end
+
+  def add_class(class_to_add)
+    @element[:classList].add(class_to_add.to_s)
+    self
+  end
+
+  def id(id)
+    attr('id', id)
+    self
+  end
+
+  # to create a html div or H1 or any other tag  the tag is found in the @original_atome.markup instance variable
+  def shape(id)
+    #
+    # we remove any element if the id already exist
+    check_double(id)
+    markup_found = @original_atome.markup || :div
+    @element_type = markup_found.to_s
+    @element = JS.global[:document].createElement(@element_type)
+    JS.global[:document][:body].appendChild(@element)
+    add_class('atome')
+    id(id)
+    self
+  end
+
+  # below here is how to create various html tag
+  def text(id)
+    # we remove any element if the id already exist
+    check_double(id)
+    markup_found = @original_atome.markup || :pre
+    @element_type = markup_found.to_s
+    @element = JS.global[:document].createElement(@element_type)
+    JS.global[:document][:body].appendChild(@element)
+    add_class('atome')
+    id(id)
+    self
+  end
+
+  def image(id)
+    # we remove any element if the id already exist
+    check_double(id)
+    markup_found = @original_atome.markup || :img
+    @element_type = markup_found.to_s
+    @element = JS.global[:document].createElement(@element_type)
+    JS.global[:document][:body].appendChild(@element)
+    add_class('atome')
+    self.id(id)
+    self
+  end
+
+  def video(id)
+    # we remove any element if the id already exist
+    check_double(id)
+    markup_found = @original_atome.markup || :video
+    @element_type = markup_found.to_s
+    @element = JS.global[:document].createElement(@element_type)
+    JS.global[:document][:body].appendChild(@element)
+    add_class('atome')
+    self.id(id)
+    self
+  end
+
+  def www(id)
+    # we remove any element if the id already exist
+    check_double(id)
+    markup_found = @original_atome.markup || :iframe
+    @element_type = markup_found.to_s
+    @element = JS.global[:document].createElement(@element_type)
+    JS.global[:document][:body].appendChild(@element)
+    add_class('atome')
+    @element.setAttribute('src', 'https://www.youtube.com/embed/lLeQZ8Llkso?si=MMsGBEXELy9yBl9R')
+    # below we get image to feed width and height if needed
+    # image = JS.global[:Image].new
+    self.id(id)
+    self
+  end
+
+  def svg(id)
+    # we remove any element if the id already exist
+    check_double(id)
+    markup_found = @original_atome.markup || 'svg'
+    @element_type = markup_found.to_s
+    svg_ns = "http://www.w3.org/2000/svg"
+    @element = JS.global[:document].createElementNS(svg_ns, "svg")
+    JS.global[:document][:body].appendChild(@element)
+    @element.setAttribute('viewBox', '0 0 1024 1024')
+    @element.setAttribute('version', '1.1')
+    add_class('atome')
+    self.id(id)
+    self
+  end
+
+  def svg_data(data)
+    data.each do |type_passed, datas|
+      svg_ns = "http://www.w3.org/2000/svg"
+      new_path = JS.global[:document].createElementNS(svg_ns.to_s, type_passed.to_s)
+      JS.global[:document][:body].appendChild(new_path)
+      datas.each do |property, value|
+        new_path.setAttribute(property.to_s, value.to_s)
+      end
+      @element.appendChild(new_path)
+    end
+  end
+
+  def update_svg_data(data)
+    data.each do |type_passed, datas|
+      element_to_update = JS.global[:document].getElementById(type_passed.to_s)
+      datas.each do |property, value|
+        element_to_update.setAttribute(property.to_s, value.to_s)
+      end
+    end
+  end
+
+  def colorize_svg_data(data)
+    command = <<-JS
+       let svgElement = document.getElementById("#{@id}");
+      if (!svgElement) {
+        return [];
+      }
+      var children = svgElement.children;
+      var ids = [];
+      for (var i = 0; i < children.length; i++) {
+        var element = document.getElementById(children[i].id); // Récupérer l'élément par son ID
+        if (element) {
+            element.setAttribute('fill', '#{data}'); // Modifier l'attribut fill
+            element.setAttribute('stroke', '#{data}'); // Modifier l'attribut stroke
+        }
+        ids.push(children[i].id);
+      }
+  return ids
+    JS
+    JS.eval(command)
+  end
+
+  def raw_data(html_string)
+    @element[:innerHTML] = html_string
+  end
+
+  def video_path(video_path, type = 'video/mp4')
+    source = JS.global[:document].createElement('source')
+    source.setAttribute('src', video_path)
+    source.setAttribute('type', type)
+    @element.appendChild(source)
+  end
+
+  def sanitize_text(text)
+    text.to_s
+        .gsub('&', '&amp;')
+        .gsub('<', '&lt;')
+        .gsub('>', '&gt;')
+        .gsub('"', '&quot;')
+        .gsub("'", '&apos;')
+  end
+
+  def innerText(data)
+    sanitized_data = sanitize_text(data.to_s)
+    @element[:innerText] = sanitized_data
+  end
+
+  def textContent(data)
+    @element[:textContent] = data
+  end
+
+  def path(objet_path)
+    @element.setAttribute('src', objet_path)
+    # below we get image to feed width and height if needed
+    # image = JS.global[:Image].new
+    @element[:src] = objet_path
+    @element[:onload] = lambda do |_event|
+      @element[:width]
+      @element[:height]
+    end
+  end
+
+  def transform(property, value = nil)
+    transform_needed = "#{property}(#{value}deg)"
+    @element[:style][:transform] = transform_needed.to_s
+  end
+
+  def style(property, value = nil)
+    if value
+      @element[:style][property] = value.to_s
+    elsif value.nil?
+      @element[:style][property]
+    else
+      # If value is explicitly set to false, remove the property
+      command = "document.getElementById('#{@id}').style.removeProperty('#{property}')"
+      JS.eval(command)
+    end
+  end
+
+  def filter(property, value)
+    filter_needed = "#{property}(#{value})"
+    @element[:style][:filter] = filter_needed
+  end
+
+end
+
+

data/documentation/deep learning/wasm_script_help.text

@@ -0,0 +1,14 @@
+
+
+curl -LO https://github.com/ruby/ruby.wasm/releases/latest/download/ruby-3_2-wasm32-unknown-wasi-full-js.tar.gz
+tar xfz ruby-3_2-wasm32-unknown-wasi-full-js.tar.gz
+
+
+rm -f ./vendor/assets/src/wasm/ruby/ruby_browser.wasm
+rm -f ./system_ruby_browser.wasm
+mv 3_2-wasm32-unknown-wasi-full-js/usr/local/bin/ruby system_ruby_browser.wasm
+
+wasi-vfs pack system_ruby_browser.wasm --mapdir /lib::./lib/ --mapdir /src::./vendor/assets/src/medias/rubies --mapdir /usr::./3_2-wasm32-unknown-wasi-full-js/usr -o vendor/assets/src/wasm/ruby/ruby_browser.wasm
+cp ./vendor/assets/src/wasm/ruby/ruby_browser.wasm ./test/test_app/src/wasm/ruby/ruby_browser.wasm
+
+

data/documentation/framework/enhance_atome.md

@@ -65,7 +65,7 @@ atome framework is looking for the rendering  method named "glow_html" we explai
 
 Finally we have to manually create the rendering method in our renderer by default the HTML render is used
 
-so we have to go to "atome/lib/atome/renderers/html/properties/" the  open "effect.rb" as we want to create an effect renderer 
+so we have to go to "atome/lib/renderers/html/properties/" the  open "effect.rb" as we want to create an effect renderer 
 
 So in the "effect.rb" file we had the method name "glow_html" (the newly atome name suffixed with "_html" for html rendering)
 

data/documentation/tutorials/tutorials.md

@@ -3,7 +3,14 @@
 [Main menu](../atome.md)
 -
 </div>
+prerequisity:
 
+ruby : 
+wasmtime:
+curl https://wasmtime.dev/install.sh -sSf | bash
+wasi :
+brew tap kateinoigakukun/wasi-vfs https://github.com/kateinoigakukun/wasi-vfs.git
+brew install kateinoigakukun/wasi-vfs/wasi-vfs
 **[- first steps](./first_steps.md)**
 -