update frontend instruction

README.md

@@ -1,7 +1,7 @@
 # full_zk_regex
 
 Presentation: [WIP]  
-Slide: [WIP] https://docs.google.com/presentation/d/1nSZdmwDKXjEM6bP6WBYyAWbCgK4cjpm-SXqDAA-MOjE/edit?usp=sharing
+Slide: https://docs.google.com/presentation/d/1nSZdmwDKXjEM6bP6WBYyAWbCgK4cjpm-SXqDAA-MOjE/edit?usp=sharing
 
 We allow users to easily create circom circuit to reveal submatch. After a few steps on frontend, we can deal with our newly baked circom circuit by
 
@@ -87,7 +87,7 @@ m3 graph is the reverted version of m2 to run on backward text. For each alphabe
 
 m4 graph is similar to m2 but the transition alphabet is m3 state instead, and for each transition it has register that store the start and end index of string that falls under that certain submatch.
 
-4. After gettting m4 as in paper, we transform the graph that extract subgroup by register into specifying which state transition is included in each tag (this process also allows us to detect multiple occurences of strings in the same submatch naturally). Then, we reassign the state number of m3 and m4 to become just plain consecutive numbers.
+4. After gettting m4 as in paper, we transform the graph that extract submatch by register into specifying which state transition is included in each tag (this process also allows us to detect multiple occurences of strings in the same submatch naturally). Then, we reassign the state number of m3 and m4 to become just plain consecutive numbers.
 
    let tagged_m4_graph = registerToState(m4_graph);
 

src/MainPage.js

@@ -264,13 +264,10 @@ export const MainPage = () => {
         </Line>
         <Line>
           2. Fill the regex field with the regex you want to match but with
-          explicit syntax like \\n to represent new line instead of using
-          original format like the text field.
-        </Line>
-        <Line>
-          Syntax like \\n, \\r, \\t are double slashes, while other escape chars
-          like \”, \*, \+, ... are single slash
+          explicit syntax like \n to represent new line instead of using
+          original format like the text field. (same for \r, \t, \v,\f)
         </Line>
+        <Line>Escape chars are escaped with \ e.g. \”, \*, \+, ...</Line>
         <Line>
           3. When defining regex with * and + for subgroup match, write () over
           that subgroup we are interested in e.g. ((a|b|c)+)
@@ -281,11 +278,15 @@ export const MainPage = () => {
         </Line>
         <Line>
           5. Highlight "Regex to be Highlighted" by clicking "Begin Regex
-          Highlight", then choose two points as subgroup boundary we want to
-          match, then click "End Regex Highlight" to name the subgroup we are
-          extracting.
+          Highlight", then choose two points as subgroup inclusive boundary we
+          want to match, then click "End Regex Highlight" to name the subgroup
+          we are extracting.
         </Line>
         <Line>6. Repeat Step 5, If done, just "Download Circom" and DONE!</Line>
+        <Line>
+          7. We also have msg generator at the bottom, in case you want to
+          generate msg for testing with zkrepl.dev{" "}
+        </Line>
       </textInfo>
       <Container>
         <TextInput

src/test.js

@@ -24,7 +24,7 @@ function test() {
   // 2nd regex
   // const regex = "DKI: (([bvad]=([12/]+); )+)bh";
   // 3rd regex
-  // const regex = "DKI: (([a-z]=([12/]+); )+)bh";
+  const regex = "DKI: (([a-z]=([12/]+); )+)bh";
 
   //============================== submatch ==============================================
 
@@ -52,39 +52,39 @@ function test() {
     [61, 70],
   ];
   //============================== Test console.log ==============================================
-  // const simp_regex = simplifyRegex(regex)
-  // console.log("simp_regex: ", simp_regex)
-  const regex = String.raw`\\nJohn`
-    .replace(/\\n/g, "\n")
-    .replace(/\\n/g, "\\n");
-  // See expanded version of regex
-  console.log("regexxx: ", regex);
+  // for slide
+  // const regex = "(((a|b)c)+)b";
+  // const submatches = [
+  //   [0, 10],
+  //   [2, 6],
+  // ];
+  //
   console.log("simp_regex: ", simplifyRegex(regex));
 
   // See if the submatches array we define is actually what we want
-  // readSubmatch(regex, submatches);
+  readSubmatch(regex, submatches);
 
   // // Show that the resutl of submatch extraction is correct
   // finalRegexExtractState(regex, submatches, text);
 
   // // Test our tagged graph construction from m1 - m4 stuffs, especially m3, m4
-  // const tagged_simp_graph = tagged_simplifyGraph(regex, submatches);
-  // // console.log("m1: ", tagged_simp_graph);
-  // let m2_graph = M1ToM2(tagged_simp_graph);
-  // // console.log("m2 jya: ", m2_graph);
-  // let m3_graph = M2ToM3(m2_graph);
-  // // console.log("m3 jya: ", m3_graph);
-  // let m4_graph = createM4(tagged_simp_graph);
-  // let tagged_m4_graph = registerToState(m4_graph);
-  // // console.log("tagged m4: ", tagged_m4_graph);
-  // let final_m3_m4 = reassignM3M4(m3_graph, tagged_m4_graph);
-  // // console.log("final m3: ", final_m3_m4["final_m3_graph"]);
-  // // console.log("final m4: ", final_m3_m4["final_m4_graph"]);
+  const tagged_simp_graph = tagged_simplifyGraph(regex, submatches);
+  // console.log("m1: ", tagged_simp_graph);
+  let m2_graph = M1ToM2(tagged_simp_graph);
+  // console.log("m2 jya: ", m2_graph);
+  let m3_graph = M2ToM3(m2_graph);
+  // console.log("m3 jya: ", m3_graph);
+  let m4_graph = createM4(tagged_simp_graph);
+  let tagged_m4_graph = registerToState(m4_graph);
+  // console.log("tagged m4: ", tagged_m4_graph);
+  let final_m3_m4 = reassignM3M4(m3_graph, tagged_m4_graph);
+  console.log("final m3: ", final_m3_m4["final_m3_graph"]);
+  console.log("final m4: ", final_m3_m4["final_m4_graph"]);
 
   // // Test generate circom circuit
-  // // console.log("circom here: ");
-  // let circom = gen_circom(regex, submatches);
-  // console.log(circom);
+  console.log("circom here: ");
+  let circom = gen_circom(regex, submatches);
+  console.log(circom);
 
   console.log("Done Testing!");
 }